create-react-app项目执行npm run build时报错：无法压缩@mui相关代码

问题根因 #

压缩失败的核心原因是react-scripts版本过低（v1.1.5），该版本内置的压缩工具uglify-js仅支持ES5语法，无法识别MUI 5使用的ES6+、ESM模块等现代JS语法，因此处理@mui/system目录下的文件时抛出压缩错误。

解决方案 #

方案1：升级react-scripts到最新稳定版（优先推荐） #

这是兼容性最好、成本最低的解决方式，操作步骤如下：

• 卸载旧版本的react-scripts

npm uninstall react-scripts
# 如使用yarn则执行：yarn remove react-scripts

• 安装最新版本的react-scripts

npm install react-scripts@latest --save
# 如使用yarn则执行：yarn add react-scripts@latest

• 删除项目根目录下的node_modules文件夹、package-lock.json文件（yarn用户删除yarn.lock文件）
• 重新安装所有依赖

npm install
# 如使用yarn则执行：yarn install

• 重新执行构建命令验证

npm run build

方案2：无法升级react-scripts的兼容处理 #

如果因项目历史依赖限制无法升级react-scripts，可通过转译MUI相关代码解决：

• 安装react-app-rewired和配套Babel插件，无需执行eject暴露配置即可修改打包规则
• 新增config-overrides.js配置文件，添加规则让Babel转译node_modules下所有@mui开头的依赖包
• 修改package.json中的scripts配置，将所有react-scripts替换为react-app-rewired，重新执行构建即可

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