为什么NextJS/React说"You likely forgot to export your component from the file it's defined in,"

Question

怎么了 我收到的错误码

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at Header
at div
at Layout (webpack-internal:///./comps/Layout.js:12:19)
at App (webpack-internal:///./pages/_app.js:10:16)
at StyleRegistry (E:GhostRez ITEverything in Between - DocumentsDevFilestest1node_modulesstyled-jsxdiststylesheet-registry.js:231:34)
at AppContainer (E:GhostRez ITEverything in Between - DocumentsDevFilestest1node_modulesnextdistserverrender.js:325:29

What I've try(我已经忘记了更多)

删除并重新安装节点模块文件夹>这个问题

重启Dev server

将Header组件从const更改为function

检查空白文件/不正确的导入>这个问题

这也不起作用(因为我没有在我的导入中使用大括号)

头组件代码

import { MediaQuery } from 'react-responsive'
import { Dropdown, Image, Menu } from 'semantic-ui-react'
import Link from 'next/link'
const Menulink = props => (
<Dropdown.Item>
<Link href={props.url} key={props.title}>
{props.title}
</Link>
</Dropdown.Item>
)
const Menubtn = props => (
<Menu.Item>
<Link href={props.url} key={props.title}>
{props.title}
</Link>
</Menu.Item>
)
const Header = () => {
const pages = [
{
title: 'Home',
url: '/'
},
{
title: 'Services',
url: '/services'
},
{
title: 'Buy',
url: '/buy'
},
{
title: 'Gallery',
url: '/gallery'
},
{
title: 'About',
url: '/about'
}
]
return (
<div className='nav'>
<Image className='navlogo' src='/images/EIB 3D Logo v25.png' alt='logo' />
<MediaQuery minWidth='900px'>
<div className='titlecontainer'>
<h1 className='navtitle'>Everything in Between</h1>
<p className='tagline'>
When good enough just is&apos;t good enough...
</p>
</div>
</MediaQuery>
<Menu className='menu'>
<MediaQuery minWidth='700px'>
{pages.map(p => (
<Menubtn key={p.title} title={p.title} url={p.url} />
))}
</MediaQuery>
<MediaQuery maxWidth='700px'>
<Dropdown
icon='list icon'
text='Menu'
floating
labeled
button
className='icon'
id='menubutton'
>
<Dropdown.Menu>
{pages.map(p => (
<Menulink key={p.title} title={p.title} url={p.url} />
))}
</Dropdown.Menu>
</Dropdown>
</MediaQuery>
</Menu>
</div>
)
}
export default Header

布局组件代码

import Footer from './footer'
import Header from './header'
const Layout = ({children}) => {
return (
<div className='app-wrap'>
<Header />
{children}
<Footer />
</div>
)
}
export default Layout

<<p>_app.js代码/strong>

import Layout from "../comps/Layout";
function App({Component, pageProps}){
return(

<Layout><Component {...pageProps}/></Layout>
)
}
export default App

Answer 1

添加export到header组件。

export const Header = () =>{ }

导入头组件，如:

import { Header } from './header'