React-App-Rewired编译报错：'Icons'未定义（缓存问题）

1. 检查config-overrides.js的生产配置差异 #

开发和生产构建的打包规则可能存在差异，重点排查：

• 是否配置了生产环境专属的模块别名或替换规则，导致SiteIcons被错误映射为Icons
• 是否添加了针对生产环境的Babel插件，部分代码优化插件可能篡改组件标识符

2. 排查Tree Shaking与代码压缩问题 #

生产环境的Tree Shaking可能误删SiteIcons的导出，或Terser压缩工具混淆了标识符：

• 在config-overrides.js中临时禁用生产环境的Tree Shaking，验证构建是否仍报错
• 检查package.json的sideEffects字段，确保SiteIcons所在文件未被标记为无副作用而被误删

3. 调整Material Icons的导入方式 #

报错中的ReceiptLongRounded等图标未定义，大概率是导入方式在生产构建中不兼容：

• 若通过SiteIcons动态导出Material Icons，改为静态导入尝试：

  import ReceiptLongRounded from '@mui/icons-material/ReceiptLongRounded';
  

• 确认按需加载的相关Babel插件在生产环境已正确配置并生效

4. 彻底清理各类缓存 #

常规缓存清理可能不彻底，执行以下操作：

• 删除项目根目录下的build、node_modules/.cache文件夹
• 执行npm cache clean --force，删除node_modules后重新执行npm install
• 关闭VS Code，删除.vscode/workspaceStorage目录后重新打开项目

5. 验证文件名大小写一致性 #

Linux/macOS系统对文件名大小写敏感，需确认：

• SiteIcons所在文件名为SiteIcons.js（首字母大写），而非小写的siteicons.js
• 所有导入SiteIcons的语句，路径与文件名大小写完全匹配

6. 跳过react-app-rewired定位问题根源 #

直接使用原生命令react-scripts build构建项目，若错误消失，说明问题出在config-overrides.js的自定义配置中，逐行排查配置代码即可

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