React项目执行npm run build报ParserError，请求排查解决

嘿，我来帮你一步步排查这个问题！从你给出的报错信息和代码来看，主要有几个关键点需要检查：

一、先搞定package.json的语法问题 #

你提到在scripts字段前有DEBUGGER字样，这绝对是个大问题！JSON格式是非常严格的，不允许出现这种不属于键值对的游离文本，Node.js在解析package.json的时候会直接报错，这肯定会影响npm run build的执行。

修复步骤： #

• 打开你的package.json，找到第14-15行的DEBUGGER，直接删掉它；
• 验证JSON语法正确性：在终端执行node -e "require('./package.json')"，如果没有报错说明语法没问题；若报错，再检查是否有多余逗号或其他格式错误。

二、排查CSS文件的语法错误 #

报错明确指向intro.css第1行第32列的语法错误，咱们聚焦这一行代码：

@font-face{ font-family: 'anodina'; src: url('../Fonts/Anodina-Regular.otf'); }

这里可能存在两个问题：

1. 字体文件路径错误或文件不存在 #

你需要确认../Fonts/Anodina-Regular.otf对应的文件真实存在：

• 你的CSS在src/Styles/文件夹下，../Fonts/对应src/Fonts/目录，检查该目录下是否有Anodina-Regular.otf文件；
• 注意文件名大小写！Linux/macOS环境下文件名区分大小写，大小写不匹配会导致文件找不到。

2. CSS变量未定义 #

你的CSS中使用了var(--clr-cyan)、var(--clr-black)等变量，但未看到任何地方定义这些变量。虽然部分浏览器会忽略未定义变量，但旧版本react-scripts打包时可能将其判定为语法错误。

修复步骤： #

• 补全字体文件或调整url()中的路径；
• 在intro.css开头（或全局index.css）添加变量定义：

  :root {
    --clr-cyan: #00ffff; /* 替换为你的青色值 */
    --clr-black: #000;
    --clr-yellow: #ffff00; /* 替换为你的黄色值 */
    --clr-white: #fff;
    --x: 0;
    --y: 0;
  }
  

三、其他可尝试的排查技巧 #

• 对比正常项目的差异：你提到另一个React项目无此问题，可以查看该项目的react-scripts版本，你的版本是4.0.1，若版本差异较大，可能存在兼容性问题。可尝试升级react-scripts：npm install react-scripts@latest --save；
• 清理缓存重试：缓存可能导致异常，执行npm cache clean --force，删除node_modules和package-lock.json后，重新执行npm install，再尝试npm run build。

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