生产环境Webpack打包React应用出现TypeError: Cannot read properties of undefined (reading 'call')

1. 定位报错的具体模块 #

• 生产环境代码被压缩，需临时启用Webpack的devtool: 'source-map'生成源码映射（调试完成后记得关闭，避免源码泄露）。部署后在浏览器开发者工具的Sources面板，找到报错对应的原始文件和行号，明确是哪个模块加载失败。
• 用浏览器Network面板监控页面加载时的chunk请求，出现错误时检查是否有404/5xx的chunk资源，或者加载顺序异常的情况。

2. 排查Webpack打包配置问题 #

• 检查splitChunks规则，是否存在chunk拆分逻辑导致模块依赖关系异常。尝试简化拆分规则（比如暂时用默认配置），验证问题是否消失。
• 确认output.publicPath在生产环境的配置是否正确，要和Azure Blob Storage的静态文件访问路径完全匹配，避免chunk加载路径错误。
• 对比开发/生产环境的babel-loader等编译配置，确保生产环境没有遗漏必要的polyfill或转换规则，防止模块初始化失败。

3. 验证Single-SPA根应用加载逻辑 #

• 临时移除所有微前端应用的注册，只保留根应用页面，看错误是否还会出现，排除其他微前端的干扰。
• 检查根应用的registerApplication配置，是否存在模块作用域冲突，导致根应用的chunk加载被异常拦截。

4. 确认Azure部署环境的完整性 #

• 对比本地打包后的文件列表和Azure Blob Storage中的文件，确保所有chunk都完整上传，没有缺失或损坏。
• 检查Azure Front Door的路由规则，是否存在路径重写导致chunk请求被错误转发，无法正确获取资源。
• 强制浏览器硬刷新（Ctrl+Shift+R）测试，同时确认Front Door的缓存禁用规则完全生效，避免加载旧的错误缓存文件。

5. 测试Webpack版本与模块兼容性 #

• 尝试降级Webpack到5.x的稳定版本（比如5.40.0），排查是否是Webpack 5.51.1的已知bug导致的模块加载异常。
• 检查项目中是否存在非标准的模块导入方式（比如动态导入语法错误、CommonJS与ES模块混合导入），生产环境下Webpack的严格校验可能触发这类问题，而开发环境被忽略。

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