React.createElement类型无效报错：Webpack+Babel编译后组件引入异常

这个问题我之前帮不少开发者排查过，本质是编译后的组件导出结构不符合你的引入预期，导致React识别不了有效的组件类型。下面给你拆解可能的原因和对应的解决办法：

1. Webpack的output.libraryTarget配置是重灾区 #

如果你的Webpack配置里output部分的libraryTarget设置不对，会直接导致默认导出的组件被包裹或者无法正确暴露。

检查并修改你的Webpack配置，确保output配置如下：

module.exports = {
  // ...其他配置项
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'test.js',
    libraryTarget: 'commonjs2' // 关键配置：适配CommonJS规范，让默认导出直接通过module.exports暴露
  }
};

commonjs2是最适合类库导出的配置之一，它会让编译后的模块以module.exports = Test的形式导出，这样你用import Test from '../lib/test.js'就能正确拿到组件本身。

2. Babel配置未正确处理React组件 #

如果你的Babel缺少React预设，可能会导致组件的类语法和导出逻辑被错误转换。确保你的Babel配置文件（比如.babelrc或babel.config.js）包含必要的预设：

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

@babel/preset-react会专门处理React的JSX语法和类组件结构，保证导出的组件结构符合React的要求。

3. 直接检查编译产物的导出结构 #

你可以打开../lib/test.js看看最后几行的导出代码：

• 正常情况应该是module.exports = Test;或者export default Test;
• 如果看到的是module.exports = { default: Test };这种嵌套结构，说明Webpack把默认导出包裹成了对象，这时候你要么临时修改引入方式：

  import * as TestModule from '../lib/test.js';
  const Test = TestModule.default;
  

  要么回到Webpack调整libraryTarget配置来解决根本问题。

4. 最后再确认组件代码的隐性细节 #

虽然你说代码本身没问题，但可以快速扫一遍：

• 有没有不小心在组件里覆盖了默认导出？
• 组件名Test在引入和定义时是否完全一致？

内容的提问来源于stack exchange，提问作者Sharon Chai