NextJS：元素类型无效：需要一个字符串（对于内置组件）或一个 class/function（对于复合组件）但得到：未定义

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

使用 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，它也是默认导出。好奇我哪里出错了。

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

项目结构

啊，刚弄明白，是个小错别字。

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

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

我运行进入同样的错误，因为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 选择允许他们参与他们的项目。

从 "next/link" 导入带有大括号 "{}""" 的 ""Link" 时，我遇到了同样的错误。 =21=] 并使用 "<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;