我該如何解決這個錯誤？“在'./App'中找不到匯出'默認'（匯入為'App'）（可能的匯出：App）”（我使用反應）-有解無憂

嘿嘿。我想嘗試對本教程做出反應。

目前我只制作了資料結構。不幸的是，我在編譯時總是出錯。

錯誤

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

應用程式.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>
    )
}

index.js

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

import App from './App';

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

這兩個檔案位于“src”檔案夾中。在“src”檔案夾中還有組件和容器。教程中描述了所有內容，資料結構相同。在此處輸入影像描述

檔案夾中的組件和容器是 .jsx 和 css 檔案。所有 css 檔案都為空，在 jsx 檔案中，您可以找到始終適應檔案名的相同代碼。

p.ex. 文章.jsx

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

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

export default Article

在此處輸入影像描述

在容器和組件中也是索引檔案。

組件/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';

容器/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';

uj5u.com熱心網友回復：

在你身上試試這個 index.js

import { App } from './App'

或者你可以改變你App.js的這個

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>
    )
}

兩種選擇。選一個。希望能幫到你。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411161.html

標籤：

上一篇：修復這個ReactNative錯誤VirtualizedListcontainsacell，該單元本身包含多個VirtualizedList

下一篇：使用useContext和useCallback嘗試使用Drawer.Navigator中的注銷按鈕時出現“無效的掛鉤呼叫”錯誤