使用CRA创建的React项目部署Heroku时缺失Babel插件报错

核心原因 #

这个错误大多是Heroku构建时babel依赖版本不匹配，或是自定义配置和CRA内置的babel规则冲突，导致所需插件未被正确安装或加载。

可行解决方案 #

1. 直接安装缺失的babel插件 #

在项目根目录执行命令，把插件添加到开发依赖：

npm install @babel/plugin-proposal-private-property-in-object --save-dev
# 用yarn的话执行：
yarn add @babel/plugin-proposal-private-property-in-object --dev

之后重新提交代码到Heroku：

git add package.json package-lock.json
git commit -m "Add missing babel plugin"
git push heroku main

2. 清除Heroku缓存后重新构建 #

Heroku有时会缓存旧依赖，导致新安装的包不生效，执行以下命令清空缓存再部署：

heroku builds:cache:purge
git push heroku main

3. 移除自定义babel配置文件 #

既然你试过.babelrc、config-overrides.js没效果，反而可能和CRA内置的babel配置冲突，建议暂时删掉这些自定义文件，让CRA用默认配置——CRA本身已经内置了必要的babel插件支持，自定义配置反而可能打乱原有依赖链。

4. 对齐Node.js版本 #

确保本地开发的Node.js版本和Heroku使用的版本一致：

• 在package.json里添加engines字段指定版本：

"engines": {
  "node": "18.x",
  "npm": "9.x"
}

• 本地执行node -v和npm -v确认版本匹配，避免版本差异导致依赖安装异常。

5. 更新CRA核心依赖 #

如果你的CRA版本较老，可能存在babel依赖的bug，执行命令更新react-scripts：

npm install react-scripts@latest --save

更新完成后重新构建部署。

内容的提问来源于stack exchange，提问作者Leonardo Rossi