¿Cómo puedo solucionar este error? "exportar 'predeterminado' (importado como 'Aplicación') no se encontró en './Aplicación' (exportaciones posibles: Aplicación)" (estoy usando reaccionar)

hola Quería probar reaccionar con este tutorial.

de momento solo he hecho la estructura de datos. desafortunadamente siempre recibo un error al compilar.


Error

Compile failed.

Attempted import error: './App' does not contain default export (imported as 'App').
Assets by state 1.6 MiB [cached] 2 assets
Assets by path . 930 bytes
  asset index.html 658 bytes [emitted]
  asset-manifest.json 272 bytes [emitted]
cached modules 1.39 MiB (javascript) 1 bytes (asset) 28.1 KiB (runtime) [cached] 144 modules
./src/index.js 1.34 KiB [built]

ERROR in ./src/index.js 8:38-41
export 'default' (imported as 'App') was not found in './App' (possible exports: App)

webpack 5.66.0 compiles with 1 error in 63 ms

Aplicación.js

import React from 'react'

import { Footer, Blog, Possibility, Features, WhatWELOVEU, Header } from './containers';
import { CTA, Brand, Navbar } from './components';

export const App = () => {
    return (
        <div className='App'>
            <div className='gradient_bg'>
                <Navbar />
                <Header />
            </div>
            <Brand />
            <WhatWELOVEU />
            <Features />
            <Possibility />
            <CTA />
            <Blog />
            <Footer />

            
        </div>
    )
}

índice.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

estos dos archivos están en la carpeta "src". en la carpeta "src" también están los componentes y contenedores. todo se describe en el tutorial y la estructura de datos es la misma. ingrese la descripción de la imagen aquí


En la carpeta, los componentes y el contenedor son archivos .jsx y css. todos los archivos css nid están vacíos, en los archivos jsx puede encontrar el mismo código siempre adaptado al nombre del archivo.

ej. Artículo.jsx

import React from 'react'
import './article.css';

const Article = () => {
    return (
        <div>
            Article
        </div>
    )
}

export default Article

ingrese la descripción de la imagen aquí


En contenedores y componentes también hay archivos de índice.

componentes/index.js

export { default as Article } from './article/Article';
export { default as Brand } from './brand/Brand';
export { default as CTA } from './cta/CTA';
export { default as Feature } from './feature/Feature';
export { default as Navbar } from './navbar/Navbar';

contenedores/index.js

export { default as Blog } from './blog/Blog';
export { default as Features } from './features/Features';
export { default as Footer } from './footer/Footer';
export { default as Header } from './header/Header';
export { default as Possibility } from './possibility/Possibility';
export { default as WhatWELOVEU } from './whatWELOVEU/whatWELOVEU';
Answer

prueba esto en ti index.js

import { App } from './App'

o podrías cambiar en tu App.jsa esto

import React from 'react'

import { Footer, Blog, Possibility, Features, WhatWELOVEU, Header 
} from './containers';
import { CTA, Brand, Navbar } from './components';

export default const App = () => {
    return (
        <div className='App'>
            <div className='gradient_bg'>
                <Navbar />
                <Header />
            </div>
            <Brand />
            <WhatWELOVEU />
            <Features />
            <Possibility />
            <CTA />
            <Blog />
            <Footer />
        </div>
    )
}

Dos opciones. Elige uno. Espero poder ayudarte.

Nuevo colaborador
Pandhu Wibowo is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.