为什么 NextJS/React 会说“你可能忘记从它定义的文件中导出你的组件”答案

【问题标题】：Why does NextJS/React say "You likely forgot to export your component from the file it's defined in,"为什么 NextJS/React 会说“你可能忘记从它定义的文件中导出你的组件”
【发布时间】：2021-12-13 07:48:32
【问题描述】：

怎么了 我收到的错误代码

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 IT\Everything in Between - Documents\DevFiles\test1\node_modules\styled-jsx\dist\stylesheet-registry.js:231:34)
    at AppContainer (E:\GhostRez IT\Everything in Between - Documents\DevFiles\test1\node_modules\next\dist\server\render.js:325:29

我尝试过的（我忘记了更多）

删除并重新安装节点模块文件夹> random_18 This Question

重新启动开发服务器

将Header 组件从const 更改为function

检查空白文件/不正确的导入 > This Question

This 也不起作用（因为我的导入没有花括号）

标头组件代码

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

_app.js 代码

import Layout from "../comps/Layout";

function App({Component, pageProps}){
  return(
    
    <Layout><Component {...pageProps}/></Layout>
  )
}
export default App

【问题讨论】：

MediaQuery 必须从默认导出导入，即import MediaQuery from 'react-responsive'。请参阅official documentation。

标签： javascript reactjs next.js jsx

【解决方案1】：

添加导出到标题组件。

export const Header = () =>{ }

导入标题组件，如：

import { Header } from './header'

【讨论】：

不，这不能解决问题。