NextJS：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义
Leo*_*ban 17 javascript node.js reactjs next.js react-component
使用 Nextjs，我在 /pages 目录中创建了一个 index.js，并在 /components/meta/ 目录中创建了 meta.js。
当我的应用程序重建时，我收到以下错误：
元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。
如下所示，我正确导入了 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>
)
项目结构
小智 17
从“next/link”导入带有大括号“{}”的“Link”并使用如下所示时，我遇到了同样的错误："<Link></Link>"
import { Link } from 'next/link';
const Hello = () => {
return (
<Link href='/hello'>
Hello
</Link>
)
}
export default Hello;
因此，我导入了没有大括号“{}”的“Link”，然后错误得到解决：
// "{}" are removed from "Link"
import Link from 'next/link';
const Hello = () => {
return (
<Link href='/hello'>
Hello
</Link>
)
}
export default Hello;
Don*_*ghn 14
我遇到了同样的错误，因为 IDE 的自动导入功能只能Head从next/document.
不：
import { Head } from 'next/document';
该组件将在自定义文档Head中使用。
做：
import Head from 'next/head'
该组件将在您的页面Head中使用。
为什么我的 IDE 没有导入正确的 Head 组件？
这不是你的 IDE 的错。嗯，不完全是......该next/head组件使用默认导出。默认导出与自动导入效果不佳。这就是为什么默认导出被认为是不好的做法的原因之一。非常不幸的是 Vercel 选择允许他们参与他们的项目。
啊，刚刚弄清楚，是一个小错字。
<meta name="description" content="Your Cryptocurrency Portfolio" />>
删除我的 meta.js 文件中的额外内容后>，它起作用了。
| 归档时间： |
|
| 查看次数： |
24009 次 |
| 最近记录： |