React新手首次部署应用至Netlify失败：构建报错求助

别慌！从你的构建日志里能找到明确的失败原因，咱们一步步来解决：

核心问题根源 #

日志里有一行关键提示：

由于process.env.CI = true，将警告视为错误处理。大多数CI服务器会自动设置该值。

Netlify作为CI/CD平台，默认开启了CI模式，这会让React的react-scripts build命令把所有ESLint警告当成错误处理，直接终止构建。下面列出的这些ESLint警告就是导致失败的直接原因：

• 未使用的变量（no-unused-vars）：比如Athletes.js里的onHover、Contact.js里的SterboholyWrapper等
• img元素缺少alt属性（jsx-a11y/alt-text）：Link.js里的img标签没有设置alt属性

解决方案 #

方案一：修复所有ESLint警告（推荐，提升代码质量） #

这是最规范的解决方式，能让你的代码更整洁合规：

• 处理未使用变量：
  • 直接删除那些定义了但从未使用的变量/组件，比如SterboholyWrapper、dailyFitness等
  • 如果暂时不想删除，可以在对应的行上方添加注释临时禁用该规则：/* eslint-disable-next-line no-unused-vars */
• 添加img的alt属性：
  • 给Link.js里的img标签加上alt属性：如果是装饰性图片，设置alt=""；如果是有实际意义的图片，写对应的描述文本，比如alt="导航链接图标"

方案二：临时禁用CI模式下的警告转错误（快速让构建通过） #

如果想先让部署成功，之后再慢慢修复代码，可以通过修改构建命令来关闭CI的严格模式：

1. 打开项目根目录的package.json，找到scripts里的build命令，修改为：

"scripts": {
  "build": "CI=false react-scripts build"
}

2. 提交修改到GitHub，重新触发Netlify构建即可

或者直接在Netlify后台修改构建命令：

• 进入你的Netlify站点后台，找到「构建和部署」->「构建命令」
• 把原来的npm run build改成CI=false npm run build，保存后重新构建

这样Netlify就不会把ESLint警告当成错误处理，构建就能顺利完成了。

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