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

Question

使用 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.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>
)

项目结构

Answer 1

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

不：

import { Head } from 'next/document';

此Head组件将用于自定义文档。

做：

import Head from 'next/head'

这个Head组件将在您的页面中使用。

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

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

Answer 2

从“next/link”导入带有花括号“{}”的“Link”并使用"<Link></Link>"时，我遇到了同样的错误，如下所示：

import { Link } from 'next/link';

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

export default Hello;

所以，我导入了没有大括号“{}”的“链接”，然后错误就解决了：

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

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

export default Hello;

Answer 3

啊刚想通了，是一个小错字。

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

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

Answer 4

我知道为时已晚 :) 但我写给读者的是：

这个错误与import部分有关。

在import部分搜索并找出问题所在。 在我的情况下是一个 svg 文件。

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

问题描述

3 个解决方案

解决方案1
10 2021-05-04 19:33:07

解决方案2
4 2022-02-12 16:37:29

解决方案3
1 已采纳 2018-12-30 22:08:01

解决方案4
0 2021-11-07 22:51:56

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

问题描述

3 个解决方案

解决方案1 10 2021-05-04 19:33:07

解决方案2 4 2022-02-12 16:37:29

解决方案3 1 已采纳 2018-12-30 22:08:01

解决方案4 0 2021-11-07 22:51:56

解决方案1
10 2021-05-04 19:33:07

解决方案2
4 2022-02-12 16:37:29

解决方案3
1 已采纳 2018-12-30 22:08:01

解决方案4
0 2021-11-07 22:51:56