时间戳

首页 > 解决方案 > 导入组件导致“元素类型无效：应为字符串（对于内置组件）或 ...”

javascript - 导入组件导致“元素类型无效：应为字符串（对于内置组件）或 ...”

问题描述

我为 Gatsby 创建了一个自定义组件。我只是想测试一些非常基本的功能。

import React from 'react'
import { graphql } from 'gatsby'

export default function Test() {
    return <div>Hello World form Test()</div>
}

我将该组件作为一个包上传到 NPM，并尝试将其导入 Gatsby 站点。但是，我收到以下错误：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我正在导入组件，例如：

import Test from "gatsby-theme-thepighero"

这让我相信我即将解决，但我似乎无法以正确的方式导航到我的组件。该组件位于 /src/components 文件夹中名为 test.js 的文件中。

我还查看了此处发布的其他问题，例如Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object without much lucky.

编辑：我已经根据下面的评论清理了这个问题。

标签： javascriptreactjsgatsbygatsby-plugin

解决方案

如果要将组件导出为default，则不需要在 import 语句中使用花括号。

export default function Test() {
    return "Hello World form Test()"
}

必须导入为：

import Test from "gatsby-theme-thepighero"

关于您的问题，请尝试将您的组件包装在一个div或一个空片段中：

export default function Test() {
    return <div>Hello World form Test()</div> // or <>Hello World form Test()</>
}

推荐阅读