NextJS: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
Question
Using Nextjs and I've created an index.js in the /pages directory and created meta.js in the /components/meta/ directory.
As my app rebuilds I get the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
As seen below I am importing Meta correctly, it is also a default export. Curious where I'm going wrong.
pages/index.js
// import Head from 'next/head'
import Meta from '../components/meta/meta';
export default () => (
<div>
<Meta />
<p>Hello world! Welcome to</p>
<h1>Moonholdings.io</h1>
</div>
)
components/meta/meta.js
import Head from 'next/head'
export default () => (
<Head>
<title>Moonholdings.io</title>
<meta name="description" content="Your Cryptocurrency Portfolio" />>
<meta name="keywords" content="cryptocurrency, crypto, portfolio, bitcoin, ethereum, holdings"/>
<meta name="robots" content="index, follow" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
)
Project structure
3 answers
solution1
10 2021-05-04 19:33:07
I ran into the same error because the IDE's auto-import feature can only import the Head component from next/document .
Don't:
import { Head } from 'next/document';
This Head component is to be used in custom documents .
Do:
import Head from 'next/head'
This Head component is to be used in your pages .
Why doesn't my IDE import the correct Head component?
It's not your IDE's fault. Well, not exactly... the next/head component uses a default export. Default exports don't play well with auto-import. It's among the reasons why default exports are considered bad practice. Quite unfortunate that Vercel chose to allow them in their project.
solution2
4 2022-02-12 16:37:29
I got the same error when importing "Link" with Curly Braces "{}" from "next/link" and using "<Link></Link>" as shown below:
import { Link } from 'next/link';
const Hello = () => {
return (
<Link href='/hello'>
Hello
</Link>
)
}
export default Hello;
So, I imported "Link" without Curly Braces "{}" then the error was solved:
// "{}" are removed from "Link"
import Link from 'next/link';
const Hello = () => {
return (
<Link href='/hello'>
Hello
</Link>
)
}
export default Hello;
solution3
1 ACCPTED 2018-12-30 22:08:01
Ah just figured it out, was a small typo.
<meta name="description" content="Your Cryptocurrency Portfolio" />>
After removing the extra > in my meta.js file, it worked.
solution4
0 2021-11-07 22:51:56
I know it's too late :) but I write this to readers:
This err Is related to import section.
Search in import section and find what is wrong. In my case was a svg file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.