报错排查：React.createElement: type i

背景

尝试使用React + TypeScript + Webpack的过程中，在父组件中引入子组件的时候，打包过程没有任何错误，但是页面一片空白，立马打开console控制台，发现一片红。。。

报错信息.png

排查

查看发现是说Home组件的render内部出现了问题，但是render内部都是一些常规的页面渲染处理，会出什么问题呢？于是尝试将引入的子组件注释掉，发现。。。真的是子组件引用的锅。

将自组件内容完全搬出放在Home中，页面正常渲染，这下就蒙蔽了。机缘巧合之下发现是不是引入子组件的时候出了问题。

` home.tsx`
const FlexWrap = require('./../../components/flexWrap/FlexWrap.tsx');
export class Home extends React.Component<HomeProps,HomeState> {
  render(){
    return(
      <div>
        <FlexWrap/>
      </div>
    )
  }
}

`FlexWrap.tsx`
class FlexWrap extends React.Component<FlexWrapProps,{ }> {
  render(){
    return(
      <div>...</div>
    )
  }
}
export default FlexWrap;

解决方案

将Home.tsx中引入子组件的部分改成
import FlexWrap from '../../components/flexWrap/FlexWrap';即可。

反思

1. import {FlexWrap} from '../../components/flexWrap/FlexWrap';
   使用{ }会报错，因为在子组件中是用export default; 只有子组件中使用export导出的情况下才能用这种。
2. import FlexWrap from '../../components/flexWrap/FlexWrap';
   正确方案。
3. const FlexWrap = require('./../../components/flexWrap/FlexWrap.tsx');
   应使用moudle.exports = xxxx

规范不清楚，混用了。。。
参考： https://www.cnblogs.com/libin-1/p/7127481.html