Webpack打包文件与源文件表现不一致，配置及React组件导入报错求助

这个报错我之前开发组件库时也碰到过，核心原因是模块导出格式不匹配，导致导入时没拿到正确的React组件类型。结合你的情况，咱们一步步排查：

1. 先检查Webpack生产配置的输出设置 #

你的打包产物是要作为库给其他项目导入使用的，必须明确设置output.libraryTarget，否则Webpack默认的输出格式会把组件包裹在奇怪的对象里，导致React识别不了。

打开你的webpack.prod.js，在output节点里补充配置：

output: {
  path: path.resolve(__dirname, 'lib'),
  filename: '[name].js',
  libraryTarget: 'commonjs2' // 适配CommonJS环境，比如Node.js或Webpack项目
  // 如果要兼容浏览器直接引入的场景，可以改成'umd'
}

另外，别忘了把React设为外部依赖，避免把React打包进组件库，防止和使用方的React版本冲突：

externals: {
  react: 'react',
  'react-dom': 'react-dom'
}

2. 确认Babel配置没有干扰模块导出 #

如果你的Babel配置里开启了模块转换（比如@babel/preset-env默认会把ES模块转成CommonJS），可能会和Webpack的模块处理逻辑冲突，导致导出格式混乱。

修改你的Babel配置（比如.babelrc或babel.config.js）：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }], // 关闭Babel的模块转换，交给Webpack处理
    "@babel/preset-react" // 确保这个预设正确处理JSX和Class组件
  ]
}

3. 检查导入方式是否正确 #

如果上面的配置都调整了还是报错，可能是导入时没正确获取到default导出。比如在CommonJS环境下，需要这样导入：

const Test = require('./lib/test.js').default;

而在ES模块环境下，直接用import Test from './lib/test.js'即可，但要确保你的项目支持ES模块导入（比如Webpack或Rollup配置正确）。

这个报错React.createElement: type is invalid — expected a string的本质，就是React拿到的不是有效的组件类/函数，而是undefined或空对象，大概率是导入时没拿到正确的导出内容。

内容的提问来源于stack exchange，提问作者Jane Emelia