heyyy. i wanted to try out react with this tutorial.

at the moment I have only made the data structure. unfortunately i always get an error when piling.

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 piles with 1 error in 63 ms

App.js

import React from 'react'

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

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

            
        </div>
    )
}

index.js

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

import App from './App';

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

these two files are in the "src" folder. in the "src" folder there are also the ponents and containers. everything is described in the tutorial and the data structure is the same. enter image description here

In the folder ponents and container are .jsx and css files. all css FIles nid empty, in the jsx files you can find the same code always adapted to the name of the file.

p.ex. Article.jsx

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

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

export default Article

enter image description here

In containers and ponents are also index files.

ponents/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';

containers/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';

heyyy. i wanted to try out react with this tutorial.

at the moment I have only made the data structure. unfortunately i always get an error when piling.

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 piles with 1 error in 63 ms

App.js

import React from 'react'

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

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

            
        </div>
    )
}

index.js

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

import App from './App';

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

these two files are in the "src" folder. in the "src" folder there are also the ponents and containers. everything is described in the tutorial and the data structure is the same. enter image description here

In the folder ponents and container are .jsx and css files. all css FIles nid empty, in the jsx files you can find the same code always adapted to the name of the file.

p.ex. Article.jsx

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

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

export default Article

enter image description here

In containers and ponents are also index files.

ponents/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';

containers/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';

• javascript
• reactjs
• react-native

• Try export default const App. – kiner_shah Commented Jan 15, 2022 at 10:01

1 Answer 1

try this in you index.js

import { App } from './App'

or you could change in your App.js to this

import React from 'react'

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

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

Two options. Choose one. Hopefully can help you.