使用react-leaflet时@react-leaflet/core的path.js模块解析失败如何解决

你的项目中使用的react-scripts@4.0.3内置的Babel版本不支持ES2020新增的??空值合并运算符，而@react-leaflet/core包的源码中使用了该语法，导致Babel转译时无法识别该字符，抛出模块解析失败的错误。

提供以下3种可行方案，可根据项目实际情况选择：

方案1：升级react-scripts到5.x版本（最推荐） #

react-scripts 5.0及以上版本已内置支持ES2020语法，无需额外配置即可兼容，操作步骤如下：

• 卸载旧版本react-scripts：
  npm uninstall react-scripts
• 安装最新版react-scripts：
  npm install react-scripts@latest
• 删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖后重启项目即可。

方案2：兼容旧版react-scripts，新增Babel转译规则 #

如果项目依赖约束无法升级react-scripts，可以通过扩展Babel配置的方式兼容，无需eject项目：

• 安装所需工具依赖：
  npm install react-app-rewired customize-cra @babel/plugin-proposal-nullish-coalescing-operator --save-dev
• 项目根目录新建config-overrides.js配置文件，写入以下内容：

const { override, addBabelPlugins, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-nullish-coalescing-operator'),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/@react-leaflet'),
    path.resolve('node_modules/react-leaflet')
  ])
);

• 修改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-leaflet版本 #

如果上述方案都不适用，可将react-leaflet降级到不使用空值合并运算符的旧版本，操作如下：

• 卸载现有版本：
  npm uninstall react-leaflet @react-leaflet/core
• 安装兼容旧版：
  npm install react-leaflet@2.8.0 leaflet@1.6.0
  注意：该方案会缺失react-leaflet 3.x版本的部分新特性，非必要不推荐使用。

修复报错后请在项目入口文件或地图组件顶部引入leaflet的全局样式，否则地图渲染会出现样式异常：
import 'leaflet/dist/leaflet.css';

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