gpt4 book ai didi

javascript - NextJS : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

转载 作者:行者123 更新时间:2023-12-05 00:30:12 26 4
gpt4 key购买 nike

使用 Nextjs,我在/pages 目录中创建了一个 index.js,并在/components/meta/目录中创建了 meta.js。

当我的应用程序重建时,我收到以下错误:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.



如下所示,我正在正确导入 Meta,它也是默认导出。好奇我哪里错了。

页面/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>
)

组件/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>
)

项目结构

enter image description here

最佳答案

我遇到了同样的错误,因为 IDE 的自动导入功能只能导入 Head来自 next/document 的组件.
不要:

import { Head } from 'next/document';
这个 Head组件将用于 custom documents .
做:
import Head from 'next/head'
这个 Head组件将用于您的 pages .
为什么我的 IDE 没有导入正确的 Head 组件?
这不是你的 IDE 的错。嗯,不完全是…… next/head组件使用默认导出。默认导出不能很好地与自动导入配合使用。这就是为什么默认导出被认为是不好的做法的原因之一。非常不幸的是,Vercel 选择允许他们参与他们的项目。

关于javascript - NextJS : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53981805/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com