Menu
I have a quite simple Layout component that uses the Head component shipped with Next.js:
import React from 'react';
import { Container } from 'semantic-ui-react';
import { Head } from 'next/head';
import Header from './Header';
const Layout = ({ children }) => (
<Container>
<Head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" />
</Head>
<Header />
{children}
<h1>Footer</h1>
</Container>
);
export default Layout;
That gives me an error:
Element 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.
Invariant Violation: Element 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 invariant (/app/node_modules/fbjs/lib/invariant.js:42:15)
at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2522:7)
at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
at renderToString (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
at renderPage (/app/node_modules/next/dist/server/render.js:275:26)
at Function.getInitialProps (/app/node_modules/next/dist/server/document.js:67:25)
at _callee$ (/app/node_modules/next/dist/lib/utils.js:111:30)
at tryCatch (/app/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/app/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/app/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
at _next (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
at /app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:34:7
at new Promise (<anonymous>)
at new F (/app/node_modules/core-js/library/modules/_export.js:36:28)
at /app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:7:12
at loadGetInitialProps (/app/node_modules/next/dist/lib/utils.js:90:31)
at _callee3$ (/app/node_modules/next/dist/server/render.js:296:51)
at tryCatch (/app/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/app/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/app/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
The error disappears if I don't use the Head component.
I can't find some related issue on Next.js page on Github and can't find something relevant on Google.
Any thoughts?
965
From the error message:
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Here's an example from their documentation where it looks like Head is a default export:
// yours (named import)
import { Head } from 'next/head';
// Next.js docs (default import)
import Head from 'next/head';
More on imports
Does updating your import fix this?
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
