安装react-leaflet后启动React App遇Module parse failed错误求助

问题重现 #

执行npm i react-leaflet安装依赖后，启动React App时出现错误：

Module parse failed: Unexpected token
错误路径：./node_modules/react-leaflet/lib/VideoOverlay.js 10:25

修改package.json中的browserslist配置后问题未解决：

"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],

有效解决方案 #

1. 检查版本兼容性 #

react-leaflet对React版本有明确要求：

• v4.x 需搭配 React 18+
• v3.x 需搭配 React 17+
• v2.x 需搭配 React 16.8+

执行以下命令查看当前依赖版本：

npm list react react-leaflet

若版本不匹配，通过降级/升级解决：

• 升级react到18+：npm install react@latest react-dom@latest
• 降级react-leaflet到兼容版本：npm install react-leaflet@3.x（对应React 17）

2. 配置Babel转译react-leaflet（Create React App环境） #

Create React App默认不会转译node_modules中的包，而react-leaflet的部分代码可能使用了未被默认Babel配置支持的语法。可以通过react-app-rewired修改配置：

1. 安装依赖：

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

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

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

module.exports = override(
  addBabelPreset('@babel/preset-env'),
  addBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining'
  )
);

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

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

4. 重新启动项目：npm start

3. 自定义Webpack配置时调整转译规则 #

如果是自定义Webpack环境，需要将react-leaflet加入到Babel转译的范围中：
修改Webpack配置文件中的module规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 排除node_modules但保留react-leaflet需要转译
        exclude: /node_modules(?!\/react-leaflet)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

4. 清除缓存重新安装依赖 #

缓存或损坏的依赖可能导致问题，执行以下步骤：

1. 删除依赖目录和锁文件：
   • Linux/Mac：rm -rf node_modules package-lock.json
   • Windows：rmdir /s /q node_modules && del package-lock.json
2. 重新安装依赖：npm install
3. 清除Create React App缓存：npm start -- --reset-cache

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