Webpack5打包React库为ESM模块触发Object.defineProperty非对象报错求助

报错根因 #

你遇到的Object.defineProperty called on non-object错误，本质是消费项目的Webpack将你输出的ESM模块错误识别为CommonJS模块，调用__webpack_require__.r时传入的参数不是合法对象导致。以下是可直接落地的修复方案：

修复步骤 #

1. 修正库项目Webpack配置 #

首先清理配置中的冗余、错误项：

• 删除output.libraryTarget: 'module'配置，Webpack5中仅保留output.library.type: 'module'即可，重复配置会触发兼容问题
• 移除HtmlWebpackPlugin插件，该插件仅用于前端应用打包生成入口HTML，打包组件库时不需要，会污染输出产物
• 添加externals配置，将react等peer依赖排除在打包产物外，避免重复打包和模块冲突：

// webpack.config.ts 新增配置
externals: {
  react: 'react',
  'react-dom': 'react-dom',
  '@emotion/react': '@emotion/react',
  '@material-ui/core': '@material-ui/core'
},

• 可选：如果需要默认导出直接指向根组件，不需要消费端额外处理，可在output.library中新增export字段：

output: {
  library: {
    type: 'module',
    export: 'default'
  }
}

2. 修正消费项目模块识别配置 #

强制消费项目的Webpack将你的组件库识别为ESM模块：

• 如果你库的package.json已经配置了"type": "module"，可在消费项目Webpack的module.rules中新增规则：

{
  test: /node_modules/[你的库名]/dist/index\.js$/,
  type: 'javascript/esm'
}

• 如果消费项目不支持ESM，可将你库的输出文件后缀改为.mjs，避免模块类型识别冲突。

3. 补充UMD格式兼容方案（可选） #

如果需要兼容非ESM消费场景，可单独打一份UMD格式产物，配置参考：

output: {
  filename: 'index.umd.js',
  library: {
    name: 'Discover',
    type: 'umd',
    export: 'default',
    umdNamedDefine: true
  },
  globalObject: 'this'
}

在package.json中新增"unpkg": "dist/index.umd.js"字段指向UMD产物即可。

内容的提问来源于stack exchange，提问作者Joe Methven