React项目使用react-leaflet遇模块解析错误，求解决方案

问题根源 #

react-leaflet@4.x 使用了ES2020的可选链操作符（?.），但你的项目构建工具未配置解析node_modules目录下的react-leaflet代码，导致无法识别该语法，抛出模块解析错误。

解决方案 #

方案1：调整Babel/Webpack配置，支持ES2020语法 #

如果你用Create React App（CRA）：

1. 安装依赖：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录创建config-overrides.js文件：

   const { override, babelInclude } = require('customize-cra');
   const path = require('path');
   
   module.exports = override(
     babelInclude([
       path.resolve(__dirname, 'src'),
       path.resolve(__dirname, 'node_modules/react-leaflet'),
       path.resolve(__dirname, 'node_modules/@react-leaflet'),
     ])
   );
   

3. 修改package.json中的脚本：

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

如果你用自定义Webpack+Babel配置：

1. 更新Webpack规则，让babel-loader处理react-leaflet：

   // webpack.config.js
   module.exports = {
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules(?!\/react-leaflet|\/@react-leaflet)/,
           use: 'babel-loader',
         },
       ],
     },
   };
   

2. 在Babel配置中添加可选链插件：

   // .babelrc 或 babel.config.js
   {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
     "plugins": ["@babel/plugin-proposal-optional-chaining"]
   }
   

方案2：降级React-Leaflet版本（临时快速方案） #

如果不想修改配置，可降级到不依赖ES2020语法的react-leaflet@3.x版本，与React 18兼容：

npm uninstall react-leaflet
npm install react-leaflet@3.2.5 --save

验证 #

完成配置修改或版本降级后，重启开发服务器，地图组件即可正常渲染。

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