React-scripts 4升级至5后出现未定义属性读取错误排查问询

核心原因：React Scripts 5 底层依赖升级（Webpack 5）暴露了隐藏问题 #

虽然错误栈指向assets.saga.ts第11行，但实际问题出在它导入的./asset-dashboard模块中。React Scripts 5 升级到了 Webpack 5，相比 React Scripts 4 使用的 Webpack 4，Webpack 5 对模块解析、循环依赖处理、ES 模块规范的执行更加严格，直接暴露了之前被宽松处理的潜在问题：

1. 循环依赖导致初始化顺序异常 #

如果./asset-dashboard模块与ASSET_DASHBOARD_ACTION_TYPES所在模块存在循环依赖（例如asset-dashboard.ts导入常量模块，而常量模块又间接导入了assets.sagas.ts），Webpack 4 可能会调整加载顺序让代码“侥幸”运行，但 Webpack 5 会严格遵循 ES 模块规范处理，导致调用watchAssetDashbaordSaga()时，ASSET_DASHBOARD_ACTION_TYPES所属的对象还未完成初始化，从而抛出Cannot read properties of undefined错误。

2. 模块导入/导出的拼写或大小写问题 #

Webpack 5 默认启用区分大小写的模块解析，而 Webpack 4 在 Windows 等不区分文件名大小写的系统中会忽略这类差异。如果存在以下情况，Webpack 5 会直接导致导入变量为undefined：

• ASSET_DASHBOARD_ACTION_TYPES的导入路径大小写错误（比如实际文件是AssetActionTypes.ts，导入时写成assetActionTypes.ts）
• 常量名拼写错误（比如定义时是ASSET_DASHBOARD_ACTION_TYPE，使用时写成ASSET_DASHBOARD_ACTION_TYPES）

3. ES 模块处理的严格性提升 #

Webpack 5 对 ES 模块的执行更贴近规范，比如若模块导出依赖异步操作或未完成的初始化，Webpack 4 可能会“提前”加载并允许访问，但 Webpack 5 会严格按初始化顺序执行，导致变量未定义。

排查与修复步骤 #

• 检查常量引用：打开./asset-dashboard.ts，确认ASSET_DASHBOARD_ACTION_TYPES的导入路径、拼写、大小写完全正确，且目标模块确实导出了该常量。
• 排查循环依赖：用webpack-bundle-analyzer等工具分析模块依赖树，确认是否存在assets.sagas.ts→asset-dashboard.ts→常量模块→assets.sagas.ts的循环依赖链，若有则将共享常量提取到独立的无依赖模块中。
• 验证初始化顺序：在常量模块顶部和watchAssetDashbaordSaga函数内添加日志，确认变量初始化是否早于函数调用。
• 修正拼写错误：确保所有导入路径、变量名的拼写和大小写完全匹配。

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