React17+Node14项目npm build失败：Babel版本兼容问题求助

针对你使用React 17、Node 14、react-scripts@4.0.3构建时出现的Requires Babel "^7.16.0", but was loaded with "7.12.3"报错，可尝试以下方案：

方案1：强制统一@babel/core版本 #

在package.json中添加overrides字段（npm 8+支持），强制所有依赖使用指定版本的@babel/core：

"overrides": {
  "@babel/core": "7.16.0"
}

添加后执行：

rm -rf node_modules package-lock.json
npm install

Windows用户替换为：

rmdir /s /q node_modules
del package-lock.json
npm install

方案2：锁定babel-preset-react-app版本 #

react-scripts@4.0.3与特定版本的babel-preset-react-app兼容，若该包被间接升级导致冲突，可在package.json中添加版本锁定：

"resolutions": {
  "babel-preset-react-app": "10.0.0"
}

（注：yarn可直接生效，npm需先执行npx npm-force-resolutions再重新安装依赖）

方案3：清理缓存并重装依赖 #

缓存或损坏的依赖文件可能导致版本加载异常，执行以下步骤：

# 清理npm缓存
npm cache clean --force
# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

方案4：排查冲突依赖来源 #

运行以下命令查看@babel/core的依赖树，定位引入高版本的包：

npm ls @babel/core

根据输出找到冲突的依赖包，通过package.json的overrides锁定该包的@babel/core版本，或直接降级该依赖包本身。

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