React CRA生产环境报错：t[s] is not a function 调试求助

问题背景 #

基于Create React App（CRA）开发的React项目，仅在生产构建版本出现以下异常：

bootstrap:19 Uncaught TypeError: t[s] is not a function
    at i (bootstrap:19:22)
    at Game.ts:142:3
    at index.tsx:19:25

点击堆栈追踪首行进入webpack的bootstrap.js文件，错误发生在执行模块函数的代码行：__webpack_modules__[moduleId](module, module.exports, __webpack_require__)，调试发现指定的moduleId为579，但该ID不存在于__webpack_modules__对象中。

添加调试日志确认__webpack_modules__中无该ID对应的模块函数，但无法定位该ID关联的具体模块。此外，堆栈中Game.ts:142:3和index.tsx:19:25仅指向文件末尾，新增代码后错误行号也随之移动。

后续排查发现，移除excalibur包（版本^0.29.3）及其相关代码后错误消失，现寻求针对此类webpack生产构建模块异常的高效调试定位方法。

项目package.json配置如下：

{
  "name": "cosmicwar-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@bufbuild/protobuf": "^2.0.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.106",
    "@types/react": "^18.3.4",
    "@types/react-dom": "^18.3.0",
    "@types/uuid": "^10.0.0",
    "excalibur": "^0.29.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "ts-proto": "^2.0.3",
    "typescript": "^4.9.5",
    "uuid": "^10.0.0",
    "web-vitals": "^2.1.4",
    "yaml": "^2.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "proto": "protoc --experimental_allow_proto3_optional --plugin=./node_modules/.bin/protoc-gen-ts_proto.cmd --ts_proto_out=src/game/proto --proto_path ../proto-schema ../proto-schema/messages.proto",
    "configure": "xcopy /sy \"../data\" \"./public/data\""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.12"
  }
}

高效调试定位方法 #

1. 生成带source map的生产构建并启用调试 #

• 修改package.json的build命令为："build": "GENERATE_SOURCEMAP=true react-scripts build"
• 构建后，在浏览器开发者工具中启用JavaScript source maps（Chrome可在Sources面板右上角设置中开启）
• 此时堆栈追踪会指向真实的源码文件和准确行号，而非压缩后的文件末尾，直接定位触发错误的逻辑。

2. 反向映射Webpack模块ID到真实模块 #

Webpack生产构建会生成模块ID与真实模块的映射，可通过以下方式获取：

• 执行构建时添加参数生成详细统计文件：NODE_ENV=production react-scripts build --stats detailed
• 构建完成后，项目根目录会生成build/bundle-stats.json，搜索目标模块ID（如579），即可找到对应的模块路径和名称。
• 若不想生成大体积统计文件，可临时修改Webpack配置（需eject或使用react-app-rewired），将optimization.moduleIds设置为'named'，生产构建后模块ID会变为可读的名称，直接在bootstrap.js中看到模块标识。

3. 隔离第三方依赖排查 #

针对第三方包引发的问题：

• 先注释掉依赖的所有调用代码，确认错误消失后，逐步恢复代码块，定位到具体触发错误的API或组件。
• 尝试升级/降级依赖版本，比如excalibur可尝试升级到最新稳定版，或回退到0.29.x的其他小版本，排查版本兼容性问题。
• 检查依赖的package.json中的browser字段或ES模块导出是否规范，部分包可能在生产构建的tree-shaking过程中被错误裁剪。

4. 临时禁用Tree-shaking验证 #

Tree-shaking误删模块是此类问题的常见原因：

• 在package.json中添加："sideEffects": ["excalibur/**/*.js"]，告知Webpack该包存在副作用，禁止随意删除模块。
• 构建后验证错误是否消失，若消失则说明是tree-shaking导致的模块丢失，可进一步排查包的导出规范或向依赖作者提交issue。

5. 可视化分析打包结果 #

• 使用react-app-rewired自定义Webpack配置，添加webpack-bundle-analyzer插件，可视化查看打包后的模块组成，确认目标模块是否被正确包含在构建产物中。
• 插件会生成交互式页面，直观展示各模块的体积和依赖关系，快速定位缺失模块的问题根源。

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