CRA集成React Leaflet遇模块解析失败（Unexpected token）求助

问题重现 #

使用react-leaflet@4.1.0在CRA中编写地图代码时，出现如下模块解析错误：

./node_modules/react-leaflet/lib/VideoOverlay.js 10:25
Module parse failed: Unexpected token (10:25)
You may need an appropriate loader to handle this file type.
|   var overlay = new LeafletVideoOverlay(url, bounds, options);
|   if (options.play === true) {
>     overlay.getElement()?.play();
|   }
|   return createElementObject(overlay, extendContext(ctx, {

已尝试修改package.json中的browserslist配置，但问题依旧：

"browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]

原因分析 #

React Leaflet 4.x版本开始使用了可选链（?.）这类ES6+新语法，但Create-React-App默认不会对node_modules目录下的代码进行Babel转译，导致这些未转译的语法无法被webpack解析。修改browserslist只能影响项目自身代码的转译规则，无法覆盖node_modules里的依赖。

可行解决方案 #

方案1：降级React Leaflet到3.x版本

3.x版本的React Leaflet没有使用这些较新的语法，能直接兼容CRA的默认配置：

1. 修改package.json中的依赖版本：

   "react-leaflet": "^3.2.5",
   "leaflet": "^1.8.0"
   

2. 删除node_modules和package-lock.json（或yarn.lock）
3. 重新执行npm install（或yarn install）
4. 重启项目

方案2：使用react-app-rewired修改Babel配置（推荐）

通过react-app-rewired和customize-cra可以在不eject的情况下修改CRA的配置，让Babel转译react-leaflet的代码：

1. 安装依赖：

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

2. 在项目根目录创建config-overrides.js文件，内容如下：

   const { override, addBabelPlugins } = require('customize-cra');
   
   module.exports = override(
     // 添加可选链和空值合并操作符的转译插件
     addBabelPlugins('@babel/plugin-proposal-optional-chaining'),
     addBabelPlugins('@babel/plugin-proposal-nullish-coalescing-operator')
   );
   

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"
   }
   

4. 重启项目即可正常运行

方案3：Eject Create-React-App（不推荐）

eject会暴露CRA的所有配置文件，但操作不可逆且后续维护成本高：

1. 执行npm run eject
2. 在暴露的babel.config.js中添加可选链插件：

   module.exports = {
     plugins: [
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator'
     ],
     // 其他原有配置...
   };
   

3. 重启项目

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