如何解决AWS Amplify引发的React项目peer dependency依赖冲突问题

核心问题分析 #

1. React版本冲突：项目使用React 16.14.0，但react-drag-drop-files@2.3.7要求React ^18.0.0，同时AWS Amplify旧版本（如@aws-amplify/core@4.0.2）依赖链中混入React Native相关包，进一步加剧版本矛盾。
2. Amplify包版本不兼容：旧版aws-amplify-react与@aws-amplify/ui的API定义不匹配，导致运行时导入错误。

分步解决方案 #

1. 彻底清理本地依赖环境 #

先清除旧依赖缓存与文件，避免残留干扰：

rm -rf node_modules package-lock.json
npm cache clean --force

2. 选择适配的依赖版本方案 #

根据项目需求二选一：

方案A：升级React到18.x，同步兼容Amplify最新版

适合需要保留react-drag-drop-files@2.3.7的场景：

• 修改package.json中的React版本：

  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  

• 升级所有AWS Amplify相关包到最新稳定版（保证版本统一）：

  npm install @aws-amplify/core@latest @aws-amplify/api@latest @aws-amplify/auth@latest @aws-amplify/ui-react@latest
  

• 若为Web项目，移除React Native冗余依赖（如react-native、react-native-get-random-values），AWS SDK在Web环境可直接使用浏览器内置API。

方案B：降级react-drag-drop-files适配React 16.x

适合不想升级React版本的场景：

• 修改package.json，指定支持React 16的版本（如v1.4.0）：

  "react-drag-drop-files": "^1.4.0"
  

3. 安装依赖并验证 #

使用legacy peer依赖模式安装（适配旧版Amplify的严格peer依赖声明）：

npm install --legacy-peer-deps

4. 修复Amplify导入错误 #

若仍出现'a' is not exported from '@aws-amplify/ui'错误，说明包版本不兼容，需替换为官方推荐的UI组件库：

• 卸载旧版aws-amplify-react，安装新版UI组件：

  npm uninstall aws-amplify-react
  npm install @aws-amplify/ui-react
  

• 替换项目中的导入语句，例如将旧的Amplify UI组件导入改为：

  import { Authenticator, Button } from '@aws-amplify/ui-react';
  

5. 验证CI/CD构建 #

本地运行正常后，提交修改到GitHub触发Amplify构建。Amplify会在干净环境中重新安装依赖，本地的修复将同步到CI/CD流程。

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