如何配置babel.config.js解决React项目中@babel/env预设找不到的问题

问题根源 #

你的项目同时安装了Babel 7规范的@babel/preset-env和旧版Babel的babel-preset-env，两者依赖冲突导致Babel无法正确定位目标预设。

解决方案 #

1. 移除冲突的旧版依赖 #

执行命令卸载旧版babel-preset-env：

npm uninstall babel-preset-env --save-dev

使用yarn的话：

yarn remove babel-preset-env --dev

2. 重新安装正确的预设包 #

虽然package.json已包含@babel/preset-env，但可能存在安装不完整的情况，重新安装确保依赖正常：

npm install @babel/preset-env --save-dev

yarn用户执行：

yarn add @babel/preset-env --dev

3. 清理缓存并重启构建工具 #

• 清理npm缓存：

  npm cache clean --force
  

• 重启webpack、开发服务器等构建工具，确保加载最新的依赖配置。

4. 验证配置文件正确性 #

你的babel.config.js中预设名称@babel/preset-env是正确的（带@前缀、完整名称），无需修改，但要避免误写为@babel/env或babel-preset-env。

额外排查点 #

• 确保执行构建命令时处于项目根目录，Babel会从当前目录向上查找node_modules，若在子目录运行，可添加--root-mode upward参数强制从根目录加载依赖。
• 检查项目中是否存在.babelrc等其他Babel配置文件，多配置文件可能引发冲突，优先使用babel.config.js的话可删除其他配置文件。

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