Babel7构建报错：无法找到babel-preset-react包求助

问题根源 #

Babel 7对预设/插件采用@babel/命名空间规范，原Babel 6的babel-preset-react已替换为@babel/preset-react。你虽在.babelrc配置了正确的新预设，但系统仍寻找旧包，大概率是其他配置文件或依赖残留了旧预设的引用，或是Babel缓存未清理导致的。

解决方案 #

• 检查所有涉及Babel的配置文件
  除.babelrc外，还要排查：

  • 若存在babel.config.js，确认其中presets配置是否正确
  • webpack.config.js里babel-loader的options.presets，有没有写"react"或"babel-preset-react"（正确应为"@babel/preset-react"）
  • ESLint、Jest等工具的配置文件，比如.eslintrc中babel-eslint相关设置是否引用了旧预设

• 清理Babel缓存
  Babel-loader会缓存编译结果，残留缓存可能导致旧预设路径被引用，执行对应命令清理：

  # Linux/macOS
  rm -rf node_modules/.cache/babel-loader
  # Windows
  rd /s /q node_modules\.cache\babel-loader
  

  也可直接删除整个node_modules/.cache文件夹。

• 排查依赖树中的旧包引用
  部分第三方依赖可能仍依赖Babel 6的旧预设，执行命令查看依赖树：

  npm ls babel-preset-react
  

  若发现某个依赖引入了旧包，可通过以下方式处理：

  • 升级该依赖到支持Babel 7的版本
  • 使用npm的overrides（npm 8+）字段，强制将babel-preset-react替换为@babel/preset-react，在package.json中添加：

    "overrides": {
      "babel-preset-react": "$@babel/preset-react"
    }
    

    之后重新执行npm install

• 统一Babel相关依赖版本
  确保所有@babel/*开头的依赖版本一致，比如@babel/core、@babel/preset-env、@babel/preset-react最好使用相同版本号，避免版本不兼容引发异常。

关于安装旧包后报错的说明 #

Babel 7要求预设/插件必须导出函数，而Babel 6的babel-preset-react导出的是对象，两者规范不兼容，因此安装旧包会触发Plugin/Preset files are not allowed to export objects, only functions错误，绝对不能通过安装旧包来解决问题。

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