Why does NextJS/React say "You likely forgot to export your component from the file it's defined in,"

Question

What's Wrong the error code I receive

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

What I've tried (heaps more that I've forgotten)

Delete and reinstall node modules folder > random_18 This Question

Restarted Dev server

Changed the Header component from const to a function

Checked for blank files/incorrect imports > This Question

This also didn't work (as I didn't have curly braces around my imports)

Header component code

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

Layout Component Code

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 code

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

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

Answer 1

Add export to header component.

export const Header = () =>{ }

import the header component like:

import { Header } from './header'