今天开发时,一个稳定的功能出现了下面的报错。
大概看这是 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),需要实际分析传递的参数是什么,并解决这个问题。
这是修复后正常的界面效果