新建React项目遇babel-loader构建失败：缺失指定Babel插件求助

问题原因 #

Babel 7.22.0版本发布后，@babel/plugin-proposal-private-property-in-object这个插件从默认的@babel/preset-env预设中被移除了，新创建的项目如果自动拉取了最新版Babel依赖，就会触发这个缺失插件的报错。

快速解决方案 #

1. 直接安装缺失的插件

在项目根目录打开终端，执行对应包管理器的命令：

• npm用户：

  npm install --save-dev @babel/plugin-proposal-private-property-in-object
  

• yarn用户：

  yarn add --dev @babel/plugin-proposal-private-property-in-object
  

2. 如果你用的是create-react-app创建的项目

不想手动改配置的话，可以临时降级Babel依赖到7.21.x版本：

• 打开package.json，找到所有以@babel/开头的依赖（比如@babel/core、@babel/preset-env等），把版本号改成^7.21.0
• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）

3. 手动配置Babel的情况（有babel.config.json/.babelrc文件）

如果项目有自定义Babel配置文件，直接把插件加到plugins数组里：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-private-property-in-object"]
}

执行完上面任意一种方案后，重新运行项目的构建命令（比如npm start）就能正常工作了。

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