Azure静态Web应用自动升级Node/NPM引发依赖问题求解决方案

问题背景 #

部署ReactJS应用到Azure静态Web应用时，平台自动将Node版本从v14.19.1升级到v16.18.0、NPM从6.14.16升级到8.19.2，引发对等依赖冲突错误。

具体报错信息 #

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @date-io/date-fns@1.1.0
npm WARN Found: date-fns@2.29.3
npm WARN node_modules/date-fns
npm WARN date-fns@"^2.29.3" from the root project
npm WARN 2 more (@mui/x-date-pickers, @date-io/date-fns)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer date-fns@"2.0.0-alpha.27" from @date-io/date-fns@1.1.0
npm WARN node_modules/@date-io/date-fns
npm WARN @date-io/date-fns@"1.1.0" from material-table@1.69.3
npm WARN node_modules/material-table

解决方案 #

方案1：锁定Node/NPM版本（临时规避） #

之前修改YML未生效，是因为未采用Azure静态Web应用官方支持的配置方式：

• 在GitHub Actions部署YML文件（通常命名为azure-static-web-apps-<部署标识>.yml）的build_and_deploy_job中添加环境变量：

env:
  AZURE_NODE_VERSION: 14.19.1
  AZURE_NPM_VERSION: 6.14.16

• 或在Azure Portal的静态Web应用配置 > 应用程序设置中添加上述两个环境变量，填入对应版本值。

方案2：修复依赖冲突（长期推荐） #

锁定版本仅为临时方案，推荐从根源解决冲突：

1. 升级material-table到兼容版本：material-table新版本已适配@date-io/date-fns v2.x（兼容date-fns@2.x），执行升级命令：

npm update material-table

2. 用NPM Overrides强制替换依赖：若暂时无法升级material-table，可在package.json中添加overrides字段，强制指定适配的@date-io/date-fns版本：

{
  "overrides": {
    "material-table": {
      "@date-io/date-fns": "^2.16.0"
    }
  }
}

添加后重新执行npm install，NPM会自动替换依赖版本解决冲突。
3. 降级date-fns（不推荐）：若项目对date-fns版本无强需求，可降级到2.0.0-alpha.27，但会影响@mui/x-date-pickers等其他依赖的功能：

npm install date-fns@2.0.0-alpha.27

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