部署React应用到Azure App Service时出现npm依赖解析错误

问题根源 #

部署React应用到Azure App Service时触发ERESOLVE依赖解析错误，核心原因：

• 项目依赖的@material-ui/core@4.12.4仅支持@types/react@^16.8.6 || ^17.0.0作为peer依赖
• 当前项目根依赖的是@types/react@^18.0.8，两者版本不兼容
• 此前部署正常是因为Azure部署环境的npm版本可能为6.x（自动忽略peer依赖冲突），近期环境升级到npm 7+后，默认启用严格的peer依赖检查，导致冲突暴露

已尝试无效方案 #

• npm install --legacy-peer-deps
• npm install --legacy-peer-deps --force
• npm install --force
• 删除node_modules后重新安装

可行解决方案 #

方案1：让Azure部署自动启用legacy-peer-deps模式 #

本地测试--legacy-peer-deps有效，但部署时Azure默认执行npm install，需通过以下方式强制启用该参数：

• 方法A：添加.npmrc文件
  在项目根目录创建.npmrc文件，写入：

  legacy-peer-deps=true
  

  提交该文件到代码仓库，Azure部署时会自动读取配置，执行npm install时默认启用legacy模式，跳过严格的peer依赖检查。
• 方法B：修改Azure部署命令
  进入Azure App Service的「配置」→「常规设置」，在「启动命令」中设置：

  npm install --legacy-peer-deps && npm run build && npm start
  

  或在Deployment Center中配置自定义部署脚本，替换默认的npm install为npm install --legacy-peer-deps。

方案2：锁定@types/react到兼容版本 #

直接降低@types/react版本以匹配@material-ui/core@4.x的要求：

1. 修改package.json中的@types/react依赖为：

   "@types/react": "^17.0.0"
   

2. 本地执行npm install，验证依赖安装正常后提交代码
3. 重新触发Azure部署，此时peer依赖版本完全匹配，不会出现解析错误

方案3：升级Material UI到v5（长期根治） #

Material UI v5（@mui/material）已全面支持React 18，升级可彻底解决peer依赖冲突：

1. 卸载旧版Material UI包：

   npm uninstall @material-ui/core @material-ui/lab
   

2. 安装新版MUI包及必要依赖：

   npm install @mui/material @mui/lab @emotion/react @emotion/styled
   

3. 替换项目中的导入路径（例如：import Button from '@material-ui/core/Button' → import Button from '@mui/material/Button'）
4. 本地测试应用功能正常后，提交代码重新部署

内容的提问来源于stack exchange，提问作者Praveen Rao Chavan.G