React v16升级至v18后AWS Amplify构建失败求助

这是**@material-ui/core@4.12.4的peer依赖冲突问题**，并非npm本身的错误。npm只是检测到依赖版本不兼容，抛出了ERESOLVE错误。

问题根源 #

• @material-ui/core@4.x版本的peer依赖明确要求React版本为^16.8.0 || ^17.0.0，不支持React18
• 本地构建成功是因为你本地使用的npm版本大概率是v6及以下，该版本不会严格校验peer依赖冲突；而AWS Amplify默认使用npm v7+，v7开始默认开启严格的peer依赖校验，因此触发了报错。

解决方案 #

方案1：临时绕过依赖校验（最快解决） #

修改AWS Amplify的构建命令，在npm install后添加--legacy-peer-deps参数，让npm采用v6的依赖处理逻辑，忽略peer依赖冲突：

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

注意：这是临时方案，可能隐藏潜在的兼容性问题，建议后续逐步升级依赖。

方案2：升级Material UI到v5（长期推荐） #

Material UI v5（包名改为@mui/material）正式支持React18，这是最彻底的解决方式。步骤包括：

• 卸载旧的Material UI包：

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

• 安装MUI v5核心包及依赖：

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

• 替换项目中的组件导入路径，比如将import Button from '@material-ui/core/Button'改为import Button from '@mui/material/Button'，同时适配v5的API变化（比如样式方案调整等）。

方案3：降级React到v17（不推荐） #

如果暂时无法升级MUI，可以将React降级到v17.x版本，满足@material-ui/core@4的peer依赖要求：

npm install react@^17.0.2 react-dom@^17.0.2

此方案会放弃React18的新特性，仅作为临时过渡方案。

完整构建日志 #

2022-12-14T10:37:14.709Z [INFO]: # Executing command: npm install
2022-12-14T10:37:19.882Z [WARNING]: npm ERR! code
2022-12-14T10:37:19.884Z [WARNING]: ERESOLVE
2022-12-14T10:37:19.904Z [WARNING]: npm
2022-12-14T10:37:19.904Z [WARNING]: ERR! ERESOLVE could not resolve
                                npm ERR!
                                npm ERR!
2022-12-14T10:37:19.904Z [WARNING]: While resolving: @material-ui/core@4.12.4
                                npm ERR! Found: react@18.2.0
                                npm ERR! node_modules/react
                                npm ERR!   react@"^18.2.0" from the root project
2022-12-14T10:37:19.904Z [WARNING]: npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0 || 
^18.0.0" from @apollo/client@3.7.2
                                npm ERR!   node_modules/@apollo/client
                                npm ERR!     @apollo/client@"^3.3.14" from the root 
                                project
                                npm ERR!     @apollo/client@"latest" from @apollo/react- 
components@4.0.0
                                npm ERR!     node_modules/@apollo/react-components
                                npm ERR!       @apollo/react-components@"^4.0.0-beta.2" 
from the root project
                                npm ERR!   33 more (@aws-amplify/ui-react, ...)
                                npm ERR!
                                npm ERR! Could not resolve dependency:
                                npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material- 
ui/core@4.12.4
2022-12-14T10:37:19.905Z [WARNING]: npm ERR! node_modules/@material-ui/core
                                npm ERR!   @material-ui/core@"^4.11.3" from the root 
project
                                npm ERR!
                                npm ERR! Conflicting peer dependency: react@17.0.2
                                npm ERR! node_modules/react
                                npm ERR!   peer react@"^16.8.0 || ^17.0.0" from 
@material-ui/core@4.12.4
                                npm ERR!   node_modules/@material-ui/core
                                npm ERR!     @material-ui/core@"^4.11.3" from the root 
 project
                                npm ERR!
                                npm ERR! Fix the upstream dependency conflict, or retry
                                npm ERR! this command with --force, or --legacy-peer- 
deps
                                npm
2022-12-14T10:37:19.905Z [WARNING]: ERR! to accept an incorrect (and potentially broken) 
dependency resolution.
                                npm ERR!
                                npm ERR! See /root/.npm/eresolve-report.txt for a full 
report.
2022-12-14T10:37:19.906Z [WARNING]: 
2022-12-14T10:37:19.906Z [WARNING]: npm ERR! A complete log of this run can be found in:
                                npm ERR!     /root/.npm/_logs/2022-12-14T10_37_14_924Z- 
debug-0.log
2022-12-14T10:37:19.918Z [ERROR]: !!! Build failed
2022-12-14T10:37:19.918Z [ERROR]: !!! Non-Zero Exit Code detected
2022-12-14T10:37:19.918Z [INFO]: # Starting environment caching...
2022-12-14T10:37:19.918Z [INFO]: # Uploading environment cache artifact...
2022-12-14T10:37:20.001Z [INFO]: # Uploaded environment cache artifact
2022-12-14T10:37:20.001Z [INFO]: # Environment caching completed
Terminating logging...

内容的提问来源于stack exchange，提问作者Fazle Rabbi Ador