Element type is invalid: expected a string (for built-in components) or a class/function (for compos

最新推荐文章于 2025-04-28 20:35:39 发布
原创 最新推荐文章于 2025-04-28 20:35:39 发布 · 1w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文纠正了一个常见的Node.js模块导出错误：应当导出一个类而非对象。正确的做法是使用module.exports设置为一个类而不是一个包含类的对象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误解释 应传过 一个 class /function  而给了个 object 

应为 module.exports = MyWebView1;
 却为 module.exports = {MyWebView1};


meng1128
关注
react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil
高级前端工程师
02-01 2864
react，ant design pro，react报错React.createElement，报错怎么办，详细解决办法，如何解决浏览器控制台报错，如何解决ant组件库报错，使用ant design pro创建组件时报错Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got
huggingface-cli: error: invalid choice: ‘download‘解决方案
热门推荐
weixin_43178406的博客
11-09 6万+
本文主要介绍了huggingface-cli: error: invalid choice: 'download’解决方案，希望能对学习使用huggingface-cli的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案
Warning: React.createElement: type is invalid -- expected a string (for built-in components)
MichaelAn的博客
09-08 2560
Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object。中文就是：React 框架创建元素时，类型不合法。今天开发时，一个稳定的功能出现了下面的报错。
react报错Element type is invalid: expected a string (for built-in components) or a class/function (for
youyou_LIN的博客
05-04 8599
react报错Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.login.jsimport React, { Component } from 'react';// import lo...
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for
weixin_45538554的博客
06-17 1406
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 出现这个问题因为， 父组件想引用自组件，这个标签。 但是导出的是一个JavaScript类 const self = new SendImage(); export default self 正确的导出子组件 export def
Error: Element type is invalid: expected a string (for built-in components) or a class/function
牛老大啊的博客
08-11 5483
第二种，引入组件后，组件写法有错误，或者夹杂了一些没用的字符，比方说逗号，点，仔细检查组件引入后的使用代码。第一种，export default 没有把组件导出，导致router.js中引入组件时候报该错误。...
Invariant Violation:Element type is invalid:expected a string(for build-in components)ora class....
慕天远的博客
04-16 2094
报错信息如下： 原因; 从react-native包中引入组件需要用{}包裹，即原文中应该改为 import {Button} from 'react-native'; 我们在react-native中导入组件的时候，如果组件创建的方法中使用了except default class XXX这种形式进行导出，那么我们在导入该组件的时候就不需要用{}包裹组件，如果在导出的时候没有...
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a
前端高薪进击手记
03-09 1024
意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。万万没想到，搞了我懵逼一天的竟然是一个版本问题。
vue 使用 eslint 报错 [vue/no-parsing-error] Parsing error: x-invalid-end-tag.
Amy的博客
07-19 4万+
项目环境及编辑器 项目框架：vue iview 编辑器：vscode 错误提示 见下图：[vue/no-parsing-error] Parsing error: x-invalid-end-tag. 原因 Col components are wrong in eslint-plugin-vue 解决办法 以下三种办法都能搜出来，这里做个总结以及记录遇到的问题： 作者给出的办法 关闭...
Configuration for rule “import/no-cycle“ is invalid: Value “∞“ should be integer.
qq_42225572的博客
10-13 3078
项目场景： 记录一次eslint配置风格不生效问题，无论我怎么配置都会提示下面这个问题： Error: .eslintrc » eslint-config-airbnb » //node_modules/eslint-config-airbnb-base/index.js » //node_modules/eslint-config-airbnb-base/rules/imports.js: Configuration for rule “import/no-cycle” is invalid: Value
React.createElement: type is invalid -- expected a string (for built-in components) or a class/fun
furfur-jiang的博客
10-17 1045
index.js:1 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, or you might
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class...
weixin_30685029的博客
04-23 434
错误解决办法：https://blog.youkuaiyun.com/niuba123456/article/details/82086513（并不绝对，学会变通） 转载于:https://www.cnblogs.com/dglblog/p/10754736.html
React.createElement: type is invalid -- expected a string (for built-in components) or a class/funct
weixin_42050406的博客
04-28 437
虽然这里配置了，其实是拼到了默认的 extensions 之后（默认里还有 [‘.mjs’, ‘.js’, ‘.jsx’, ‘.vue’, ‘.json’, ‘.wasm’]），所以最终 resolver 会先试 .mjs、.js、.jsx、.vue、.json，再到加的 .ts、.tsx。这也是为什么不写后缀时，它先捞到 ChevronRight.json 而不是 .tsx。搞了好久，才注意到实际导出的是.json，所以页面上一直用不了。这个文件夹下有同名配对的.json和.tsx文件。
Element type is invalid: expected a string (for built-in components) or a class/function (...
知行合一
05-18 1万+
TaskQueue: Error with task : 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 co...
[React]Element type is invalid: expected a string (for built-in components) or a class/function
stay hungry stay foolish
12-20 745
目录背景操作 背景 react+redux做todolist项目中遇到这个问题 操作 安装报错提示信息，把app改为function或者class // const App = ( // <Provider store={store}> // <TodoList /> // </Provider> // ) function App() { return <Provider store={store}>
React.createElement: type is invalid -- expected a string (for built-in components) or a class..
Amen的博客
08-02 2万+
问题： 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 co...
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
最新发布
07-02
你遇到的错误： ``` Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ``` 是一个 React 中常见的运行时错误，通常发生在 **组件导入或使用方式不正确** 的时候。 --- ## 🚫 错误原因分析 这个错误的核心是：**React 期望你传入一个有效的组件（字符串标签名或函数/类组件），但你传入的是一个对象。** 常见场景包括： ### ✅ 场景一：错误地导入了 JSON Schema Form 的 Theme 组件 比如你这样写： ```jsx import Bootstrap4Theme from '@rjsf/bootstrap-4'; <Bootstrap4Theme> <Form schema={schema} /> </Bootstrap4Theme> ``` 但实际上 `@rjsf/bootstrap-4` 的导出结构如下： ```js export const Theme = { ... }; ``` 所以你应该这样用： ```jsx import { Theme as Bootstrap4Theme } from '@rjsf/bootstrap-4'; ``` 否则你导入的是整个模块对象而不是具体的组件。 --- ### ✅ 场景二：错误地使用了一个非组件的对象作为 JSX 标签 ```jsx const MyComponent = { name: 'Test' }; <MyComponent /> // ❌ 这会报错，因为不是一个函数或类 ``` --- ## ✅ 正确使用示例 ### 使用 `@rjsf/bootstrap-4` 主题的正确方式： ```jsx import React from 'react'; import Form from '@rjsf/core'; import { Theme as Bootstrap4Theme } from '@rjsf/bootstrap-4'; function App() { const schema = { title: "测试表单", type: "object", properties: { name: { type: "string", title: "姓名" } } }; return ( <Bootstrap4Theme> <Form schema={schema} /> </Bootstrap4Theme> ); } export default App; ``` --- ## ✅ 场景三：异步加载组件未使用 `React.lazy` 如果你这样写： ```jsx const LazyComponent = import('./MyComponent'); <LazyComponent /> ``` 也会触发此错误，应改为： ```jsx const LazyComponent = React.lazy(() => import('./MyComponent')); function App() { return ( <React.Suspense fallback="Loading..."> <LazyComponent /> </React.Suspense> ); } ``` --- ## ✅ 场景四：从模块中错误解构组件 比如你这样写： ```jsx import * as MyComponent from './MyComponent'; <MyComponent /> // ❌ 错误！这是个对象不是组件 ``` 应确保你是导入的默认导出或具名导出的组件： ```jsx import MyComponent from './MyComponent'; // 或者 import { MyComponent } from './MyComponent'; ``` --- ## 🔍 总结排查步骤 1. 查看报错的组件名（如 `<Bootstrap4Theme>`）。 2. 检查该组件是否是从正确的命名空间导入的。 3. 确保你使用的是一个 **函数组件、类组件或原生 HTML 标签名**。 4. 不要直接将对象当作组件使用。 5. 如果是动态导入，记得用 `React.lazy` + `Suspense`。 --- ##
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值