使用react-scripts的React应用出现“Cannot find module '@babel/preset-env'”解析错误

看起来你遇到的问题核心是版本兼容性冲突：你当前使用的Node.js v20.15.0 是较新的版本，但你的react-scripts是4.0.3版本，这个旧版的react-scripts并不支持Node 20+，导致Babel依赖的解析逻辑出现异常——哪怕你手动安装了@babel/preset-env，也会因为版本不匹配无法被正确识别。

结合你已经尝试过的方法，我给你几个针对性的解决方案，按推荐优先级排序：

方案一：降级Node.js到兼容版本（最稳妥） #

react-scripts 4.0.3 官方支持的Node.js版本是10.x、12.x、14.x、16.x，其中16.14.0是和React 17搭配的最稳定兼容版本。具体步骤：

• 先通过nvm切换Node版本：

  nvm install 16.14.0
  nvm use 16.14.0
  

• 清理旧依赖文件：

  # Mac/Linux系统
  rm -rf node_modules package-lock.json
  # Windows系统
  rmdir /s /q node_modules && del package-lock.json
  

• 重新安装干净的依赖：

  npm ci
  

• 再尝试启动项目，应该就能正常编译了。

方案二：升级react-scripts到兼容Node 20的版本 #

如果你想保留Node.js 20.x，可以把react-scripts升级到5.x版本（React 17完全兼容这个版本）：

• 升级react-scripts到稳定兼容版：

  npm install --save react-scripts@5.0.1
  

• 同样清理旧依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm ci
  

• 注意：你单独安装的eslint@7.32.0可能和react-scripts 5.x内置的eslint版本冲突，建议直接卸载单独的eslint（react-scripts已经内置了适配好的eslint）：

  npm uninstall eslint
  

  之后直接使用项目内置的eslint规则即可，不需要单独配置。

方案三：强制适配Node 20 + react-scripts 4.x（不推荐，有潜在风险） #

如果必须保留当前的react-scripts版本，你需要安装和react-scripts 4.0.3完全匹配的Babel依赖版本：

• 安装对应版本的Babel核心和preset-env：

  npm install --save-dev @babel/core@7.14.6 @babel/preset-env@7.14.7
  

• 清理缓存和依赖后重新安装：

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

另外还有个小排查点：检查你的项目根目录有没有自定义的.eslintrc或.babelrc文件，如果有的话，可能会覆盖react-scripts的默认配置，导致Babel依赖找不到。如果不是必须的，建议暂时删除这些自定义配置，用react-scripts的默认配置试试。

备注：内容来源于stack exchange，提问作者user28691752