Webpack 5升级后编译成功但报exports is not defined错误如何解决

修复方案 #

问题根源 #

报错本质是浏览器原生不支持CommonJS规范的exports、require语法，你的TS编译输出了CommonJS格式代码，再加上Webpack 5的UMD配置上下文默认值变更，导致打包工具没有正确将CommonJS语法转成浏览器可运行的代码。

具体修改步骤 #

1. 调整tsconfig.json配置
   将compilerOptions下的module配置从CommonJS改为ESNext，让TS输出ES模块格式代码，适配前端打包场景：

{
  "compilerOptions": {
    // 其他配置保持不变
    "module": "ESNext"
  }
}

2. 调整webpack.config.js的output配置

• 如果你的项目是普通前端业务项目，不需要发布为第三方库，直接删除libraryTarget: 'umd'这行配置即可，CRA默认的前端应用打包不需要该配置。
• 如果你确实需要打包为UMD格式的第三方库，保留libraryTarget的同时新增globalObject配置：

output: {
  libraryTarget: 'umd',
  globalObject: 'this', // 修复Webpack 5默认globalObject为self导致的UMD上下文错误
  // 其他output配置保持不变
}

3. 可选优化（适配CRA默认处理逻辑）
   你当前配置中babel-loader没有处理TS/TSX文件，且单独配置了ts-loader处理TS。如果要对齐CRA原生逻辑，提升编译性能，可以做如下调整：

• 将babel-loader的测试规则改为匹配TS/TSX：test: /\.(js|mjs|jsx|ts|tsx)$/
• 新增@babel/preset-typescript到babel的presets数组中
• 删除单独的ts-loader规则，TS类型检查可单独通过tsc --noEmit命令执行

修改完成后删除构建缓存（node_modules/.cache目录），重新执行编译即可解决报错。

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