React项目开发正常但生产构建失败：Css Minimizer插件TypeError报错

问题重现 #

执行构建命令：

PS C:\Users\Hp\Desktop\web technology\NCT\carrental> npm run build

命令输出：

carrental@0.1.0 build
react-scripts build

构建报错：

Creating an optimized production build...
Failed to compile.

static/css/main.b6d8a2cb.css from Css Minimizer plugin
TypeError: Cannot set properties of undefined (setting 'value')

项目开发环境运行正常，报错文件static/css/main.b6d8a2cb.css为构建过程生成的临时文件，非项目自有文件。

解决步骤 #

• 清理缓存与依赖重装
  先清理旧依赖和缓存，重新安装后再构建：
  Windows环境执行：

  Remove-Item -Recurse -Force node_modules, package-lock.json
  npm install
  npm cache clean --force
  npm run build
  

  类Unix环境执行：

  rm -rf node_modules package-lock.json
  npm install
  npm cache clean --force
  npm run build
  

• 调整css-minimizer-webpack-plugin版本
  该报错多因插件版本与项目依赖不兼容导致，安装指定兼容版本：

  npm install css-minimizer-webpack-plugin@3.4.1 --save-dev
  

  若使用react-scripts且未eject，可借助craco等工具覆盖webpack配置来指定插件版本；已eject则直接修改webpack.config.js中的插件版本配置。

• 排查CSS语法问题
  生产构建的CSS压缩器对语法校验更严格，检查项目所有CSS文件（包括第三方组件引入的样式）：

  • 检查是否存在未闭合的括号、无效的CSS变量
  • 排查是否有特殊字符或不规范的选择器定义
  • 确认是否存在@import引入无效资源的情况

• 临时禁用CSS压缩验证
  临时关闭CSS压缩，验证是否为压缩器导致的问题：
  修改package.json中的build命令：

  "build": "react-scripts build --minify-css false"
  

  执行构建，若成功则可确定问题出在CSS压缩环节，再针对性处理。

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