NextJS：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义答案

【问题标题】：NextJS: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefinedNextJS：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义
【发布时间】：2022-02-13 00:51:51
【问题描述】：

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

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

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。

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

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>
)

项目结构

【问题讨论】：

标签： javascript node.js reactjs next.js react-component

【解决方案1】：

我遇到了同样的错误，因为 IDE 的自动导入功能只能从 next/document 导入 Head 组件。

不要：

import { Head } from 'next/document';

此Head 组件将用于custom documents。

做：

import Head from 'next/head'

此Head 组件将用于您的pages。

为什么我的 IDE 没有导入正确的 Head 组件？

这不是您的 IDE 的错。好吧，不完全是……next/head 组件使用默认导出。默认导出不能很好地与自动导入配合使用。这就是为什么它们被认为是不好的做法的原因。很遗憾 Vercel 选择允许他们参与他们的项目。

【讨论】：

我正好遇到了这个。也许值得强调的是“下一个/文档”导入来自nextjs.org/docs/advanced-features/custom-document。在关注 react2025.com 时，我将我的标题放在那里，收到 nextjs.org/docs/messages/no-document-title 错误，然后尝试将其移回应用程序，但导入混淆了。

【解决方案2】：

我在从 "next/link" 导入带有花括号 "{}" 的 "Link" 并使用 "<Link></Link>" 时遇到同样的错误strong>如下图：

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;

【讨论】：

【解决方案3】：

啊，刚刚发现，是一个小错字。

<meta name="description" content="Your Cryptocurrency Portfolio" />>

在我的 meta.js 文件中删除多余的 > 后，它起作用了。

【讨论】：