Azure静态Web Apps部署React项目时caniuse-lite过时报错如何解决？

本次构建失败由两个规则叠加触发：

• Azure Static Web Apps的CI构建环境默认开启CI=true环境变量，react-scripts在该模式下会将所有编译警告视为错误，直接终止构建流程
• 项目依赖的caniuse-lite版本过低触发了Browserslist的版本警告，刚好命中上述规则导致构建失败

你本地执行npx browserslist@latest --update-db无效，是因为该命令仅更新本地临时环境的caniuse-lite数据，没有修改项目的依赖锁定文件，云端CI构建时仍会按照仓库提交的lock文件安装旧版本依赖。

方案1：临时绕过警告拦截（应急用） #

直接修改CI环境变量关闭警告转错误的规则，两种实现方式可选：

• 在Azure静态Web App门户的「配置」-「环境变量」页面，添加变量CI，值设为false，保存后重新触发构建即可
• 修改项目package.json的build命令，跨平台写法推荐先安装cross-env依赖，再调整命令：

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

该方案仅作为应急使用，会忽略所有编译警告，可能遗漏潜在的代码问题，优先推荐使用方案2

方案2：彻底修复caniuse-lite版本警告 #

修改项目依赖配置强制拉取最新版caniuse-lite，从根源消除警告：

• 若使用yarn作为包管理器：在package.json中新增resolutions字段锁定版本：

  {
    "resolutions": {
      "caniuse-lite": "latest"
    }
  }
  

  本地重新执行yarn install生成新的yarn.lock文件，将package.json和yarn.lock一起提交到仓库触发构建即可。
• 若使用npm作为包管理器：在package.json中新增overrides字段锁定版本：

  {
    "overrides": {
      "caniuse-lite": "latest"
    }
  }
  

  本地重新执行npm install生成新的package-lock.json文件，将两个文件一起提交到仓库触发构建即可。

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