重装node_modules后react-leaflet项目报babel-loader解析错误如何解决？

错误产生原因 #

报错代码里的??是空值合并运算符，属于ES2020新增的语法特性，你项目当前的Babel配置不支持转译node_modules依赖中使用的该语法。
你没有改动react-leaflet版本依然出问题，是因为@react-leaflet/core作为react-leaflet的依赖包在小版本更新中引入了该语法，你删除node_modules后重装依赖时，如果没有锁死子依赖版本，就会自动拉取包含该语法的更新版本，导致编译失败。

修复方案 #

情况1：使用create-react-app搭建项目，未执行eject操作 #

• 方案一：锁死@react-leaflet/core的版本到未引入该语法的1.0.2版本
  如果你使用yarn作为包管理器，在package.json中新增如下配置：

  "resolutions": {
    "@react-leaflet/core": "1.0.2"
  }
  

  如果你使用npm v8及以上版本，在package.json中新增如下配置：

  "overrides": {
    "@react-leaflet/core": "1.0.2"
  }
  

  配置添加完成后，删除node_modules目录、package-lock.json或者yarn.lock文件，重新执行依赖安装命令即可。
• 方案二：升级项目的react-scripts版本到5.0及以上，该版本默认内置了ES2020语法的转译支持，无需额外配置即可兼容该语法。

情况2：已eject项目或自定义webpack配置 #

修改webpack配置中的babel-loader规则，将@react-leaflet/core加入需要转译的目录，不要直接排除全部node_modules目录，示例配置如下：

{
  test: /\.js$/,
  exclude: /node_modules(?!\/@react-leaflet)/,
  use: ['babel-loader']
}

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