运行react-leaflet v3.2.1出现babel-loader解析错误该如何修复？

报错原因 #

该编译错误是因为react-leaflet v3.2.1源码使用了ES2020规范的空值合并运算符（??），而你使用的react-scripts v4.0.3内置的babel配置默认不会对node_modules目录下的依赖做新语法转译，低版本babel-loader无法识别该运算符，因此抛出解析失败错误。

修复方案 #

你可以根据自身项目情况选择以下任意一种方案：

方案1：降级react-leaflet到兼容版本

react-leaflet v3.1.0及更早版本未使用空值合并运算符，直接降级即可适配当前环境，执行安装命令：

npm install react-leaflet@3.1.0
# 若使用yarn则执行：
# yarn add react-leaflet@3.1.0

方案2：扩展babel配置转译react-leaflet（无需eject项目配置）

如果需要保留react-leaflet v3.2.1版本，可以通过react-app-rewired扩展脚手架配置，让babel转译react-leaflet的源码：

1. 首先安装所需依赖：

npm install react-app-rewired customize-cra @babel/plugin-proposal-nullish-coalescing-operator --save-dev

2. 在项目根目录新建config-overrides.js配置文件，写入以下内容：

const { override, addBabelPlugin, addBabelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 引入空值合并运算符转译插件
  addBabelPlugin('@babel/plugin-proposal-nullish-coalescing-operator'),
  // 配置babel需要处理的目录，新增react-leaflet目录
  addBabelInclude([
    path.resolve('src'),
    path.resolve('node_modules/react-leaflet')
  ])
);

3. 修改package.json中的scripts配置，将react-scripts替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

方案3：升级react-scripts到v5及以上版本

react-scripts v5开始内置支持ES2020全部语法的转译，无需额外配置即可识别??运算符，直接升级即可：

npm install react-scripts@latest

注意：升级前请确认项目其余依赖与react-scripts v5的兼容性，避免出现其他兼容报错。如果你的项目使用的是react v1.x，还需要同步确认react版本和高版本react-scripts的适配性，必要时同步升级react版本。

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