未捕获的错误:元素类型无效:需要一个字符串(对于内置组件)

2023-12-02

I am getting this error. I have defined all components in index.js and I am using react-dom.

网络打包机本身正在编译,没有错误或警告。

错误:未捕获错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:未定义。您可能忘记从定义它的文件中导出组件。index.js

import 'core-js/fn/object/assign';
import React, { Component }  from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/CustomerSearch';


// Render the main component into the dom
ReactDOM.render(<App />, document.getElementById('app'));

应用组件.js

import React, { Component }  from 'react';
import {Grid} from 'Adding my own package here';
import EventEmitter from 'wolfy87-eventemitter';


export default class AppComponent extends React.Component {

  emitter = null;

  constructor() {
    super();

    this.emitter = new EventEmitter();

    this.emitter.addListener('result', function (args) {
    })

  }

  render() {
    return (
      <div className="Search">
        <Grid>
          <Grid.Column width={4}>
            <SearchForm updatechForm emitter={this.emitter}/>
          </Grid.Column>
          <Grid.Column width={12}>
            <ResultList emitter={this.emitter}/>
          </Grid.Column>
        </Grid>
      </div>
    );
  }
}

AppComponent.defaultProps = {};

error

warning.js:35 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning @ warning.js:35
warning @ warning.js:59
createElement @ ReactElementValidator.js:192
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 35891eb36bf51eb82cc9:19
module.exports @ bootstrap 35891eb36bf51eb82cc9:62
(anonymous) @ bootstrap 35891eb36bf51eb82cc9:62
invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:366)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)

我将错误解释为也许您忘记导出您的Grid(或者也许你的App) 成分。这是你检查过的吗? (在定义这些组件的两个文件中)。

And as abdul说,导入的格式可能错误。这取决于您是否通过以下方式导出了组件export or export default.

对于仅使用导出的组件(或函数、常量等)export你需要使用以下语法导入它import {ComponentName} from ...。否则,如果它们是由export default,然后导入时不带花括号 (import ComponentName from ..).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获的错误:元素类型无效:需要一个字符串(对于内置组件) 的相关文章

随机推荐

  • 包含撇号的 Ruby 正则表达式是什么?

    我目前正在为 Ruby 做 exercism io 但无法通过最后的测试 最后的测试内容如下 def test with apostrophes phrase Phrase new First don t laugh Then don t
  • 如何处理 Visual Studio C++ 中的访问冲突?

    通常访问冲突会终止程序 并且我无法使用以下命令捕获 Win32 异常try and catch 有没有办法让我的程序保持运行 即使发生访问冲突 最好我想处理异常并向用户显示发生了访问冲突 编辑 我希望我的程序非常健壮 即使是针对编程错误 我
  • 如何使用 JDBC 连接到本地主机?

    我在自己的机器上安装了MySql 我使用 MySql CommandLine Client 创建了数据库 创建了表 在学校开展项目时 我使用以下语法连接到学校的数据库 public static Statement connect try
  • 忽略 Elasticsearch 中的空格

    对于我的搜索 我想考虑以下事实 space 过滤器请求中的字符不是强制的 例如 当我过滤 THE ONE 我看到了相应的文档 就算写了也想看 THEONE 这就是我今天的查询的构建方式 boolQueryBuilder must Query
  • 在google云平台上部署python脚本

    我正在弄清楚如何在谷歌云平台上部署我的脚本 我已经创建了一个包含以下内容的目录或文件夹script py以及所有的图书馆 lib文件夹 我不明白的是设置我的app yaml to run script py python 2 7 和访问li
  • Jquery在页面加载后生效

    我正在使用jquery ui 但该页面需要很长时间才能加载 我还对 UL 标签的 LI 元素使用制表符功能 但一瞬间列表按原样显示 然后选项卡效果发生 我已经编写了用于在同一 html 文件中调用选项卡的 javascript 我如何减少加
  • 使用 soundpool 播放声音示例

    我想学习如何使用soundpool方法 我想让你向我展示一个运行 2 个声音的非常简单的示例 创建一个名为的文件夹raw under your app res 然后将您的铃声粘贴到此文件夹中 例如your app res raw ringt
  • 在两个可能的分隔符之一之前查找一个单词

    word 12335 anotherword 2323434 totallydifferentword 455 word 32 我需要抓取之前的字符串 or 仅使用基本 R 函数 我可以使用以下方法来做到这一点stringr但不想向我的包添
  • 如何在.net core项目中设置soapclient的超时

    我必须在 Net Core 2 0 项目中使用 SOAP 服务 我添加了服务参考 如以下链接所述 缺少链接 404 对于某些方法 服务运行良好 但是 某些方法需要很长时间 由于操作服务正在执行 在这种情况下程序会抛出异常 System Ne
  • 如何从我自己的网站更新 Facebook 状态?

    我有自己的网站 正在创建博客 新闻条目 但我希望在添加它们时将它们直接上传到我的 Facebook 页面 有没有一种简单的方法可以做到这一点 我的代码是这样的 是否有代码或 API 我可以用来更新我的 Facebook 页面 您需要注册成为
  • 带有post请求和参数作为Json对象android的HttpUrlConnection

    您好 我正在开发小型 Android 应用程序 我想在其中使用 HttpUrlConnection post 请求 并将 params 作为 json 对象 但它对我不起作用我是通过以下方式做到的 try URL url DataOutpu
  • 服务器端包含在expressjs中

    是否可以使用express js 生成服务器端包含 我正在尝试在不同页面上重用页眉和页脚标记 以便我可以在一处进行页眉 页脚更改 尝试使用部分 您必须在一些模板引擎之间进行选择 默认模板引擎是jade 因此为此您必须执行以下操作 创建一个文
  • 在.net 4.5项目中使用.net 2.0 dll(vshost在调试时崩溃)

    我正在尝试使用通过 dotnetbuilder 从 matlab 创建的 dll 文件 http www mathworks se help dotnetbuilder ug create a net component from matl
  • 在 OpenCV 中匹配相似图像

    我有两组图像 H 和 L H 由 512x512 图像组成 L 包含 H 中的所有图像 但缩小到 32x32 128x128 并带有有损压缩产生的压缩伪影 使用 OpenCV 将 H 中的图像与 L 中最接近的图像进行匹配的最佳方法是什么
  • 扑克牌翻转动画

    您知道有哪些免费组件 库可以实现 3D 翻转效果吗 演示在这里 斯诺克电视 这是一个尝试使用SetWorldTransform type TForm1 class TForm PaintBox1 TPaintBox Button1 TBut
  • 使所有按钮大小相同

    请看下面的代码 import javax swing import java awt event import java awt public class GUI extends JFrame private JButton open pr
  • 为什么整个系统事件溯源是反模式?

    我目前正在设计一个新的企业系统 该系统的目的是跟踪 显示客户与公司的互动 即事件 并通知员工 使用事件源模式来保存所收集的所有客户交互 事件的分类帐似乎非常合适 因为我们所有其他域对象都源自事件流 然而 我看到一篇文章说基于事件源的整个系统
  • 不想在 jqGrid 页面加载后第一次显示排序图标

    我正在使用 jqGrid 并通过 JSON 加载数据 当我第一次获取数据时 我使用自定义方法对其进行排序并将该数据传递到网格 但它总是在第一列上显示排序图标 我不想显示该图标 因为自定义方法使用多个计算对数据进行排序 但是当排序图标出现在第
  • 如何使用 linq 对列表及其子项及其子项进行排序?

    我有一个亲子关系 类似于 public class MyType public IList
  • 未捕获的错误:元素类型无效:需要一个字符串(对于内置组件)

    I am getting this error I have defined all components in index js and I am using react dom 网络打包机本身正在编译 没有错误或警告 错误 未捕获错误