Warning: React.createElement: type is invalid -- expected a string (for built-in components)

今天开发时,一个稳定的功能出现了下面的报错。
在这里插入图片描述
大概看这是 react 框架提示错误了,一头雾水。

报错信息:Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object。中文就是:React 框架创建元素时,类型不合法。函数的参数应该是类或者构造函数,但是实际参数是对象。
在这里插入图片描述

问题原因

import * as 使用不当,具体细节如下

查阅资料后,应该是某个代码的 import 或者 export 不合适造成的问题。

经排查,项目中引入了一个第三方组件,主要的代码如下,这就是一个 React 类组件,对外默认暴露这个组件。

class Picker extends React.Component {
    
    
  
}

export default Picker;

然后我们原来使用的语法如下。import * as xxx 这种适合于一个模块有多个暴露的函数,例如一些工具函数模块。常规的 UI 组件不需要这样引入。近期更改了 webpack 部分配置,这一句导入语法产生错误。

import * as SeaDatePicker from 'calendar/lib/Picker';

改成下面的导入语法后,webpack 打包后就是正常的。

import Picker from 'calendar/lib/Picker';

说明,这个问题也可能是其他原因造成的报错(React element 不是 Class 或者 Function),需要实际分析传递的参数是什么,并解决这个问题。

这是修复后正常的界面效果
在这里插入图片描述

参考资料

stack overflow

CSDN

CSDN

猜你喜欢

转载自blog.csdn.net/weixin_41697143/article/details/132758350
今日推荐