NextJS：元素类型无效：预期为内置组件的字符串或复合组件的类/函数，但实际得到的是未定义。

Question

NextJS：元素类型无效：预期为内置组件的字符串或复合组件的类/函数，但实际得到的是未定义。

javascriptnode.jsreactjsnext.jsreact-component

17

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

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

元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但得到的却是undefined。

如下所示，我正确地导入了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>
)

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

项目结构

- Leon Gaban

1

我在我的Next.js应用程序中遇到了相同的错误，但以下任何解决方案都不适用或无效。 - jordiburgos

3个回答

14

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

不要：

import { Head } from 'next/document';

这个Head组件是用于在自定义文档中使用的。

做：

import Head from 'next/head'

这个Head组件用于您的页面。

为什么我的IDE无法正确导入Head组件？

这不是你的IDE的错。好吧，不完全是... next/head组件使用默认导出。默认导出与自动导入不兼容。这就是默认导出被认为是不良实践的原因之一。相当不幸的是，Vercel选择在他们的项目中允许它们。

- uɥƃnɐʌuop

1

我也遇到了这个问题。也许值得强调的是，'next/document' 导入来自 https://nextjs.org/docs/advanced-features/custom-document。在跟随 react2025.com 的过程中，我把标题放在那里，得到了一个 https://nextjs.org/docs/messages/no-document-title 错误，然后尝试将其移回 app，但导入混乱了。 - Mat Schaffer

1

啊，我刚刚找到了问题所在，是一个小小的拼写错误。

<meta name="description" content="您的加密货币投资组合" />

在我的 meta.js 文件中删除多余的 > 后，它就可以正常工作了。

- Leon Gaban

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kai - Kazuya Ito · Accepted Answer

当我从"next/link"导入带有花括号{}的"Link", 并像下面一样使用"<Link></Link>"时，我遇到了相同的错误:

import { Link } from 'next/link';

const Hello = () => {
  return (
    <Link href='/hello'>
      Hello
    </Link>    
  )
}

export default Hello;

所以，我导入了"Link" without Curly Braces "{}"，然后错误得到了解决：

// "{}" are removed from "Link"
import Link from 'next/link';

const Hello = () => {
  return (
    <Link href='/hello'>
      Hello
    </Link>    
  )
}

export default Hello;