React项目编译失败求助：需额外加载器处理@react-leaflet/core模块

• 定位错误根源：报错中的??是ES2020新增的空值合并运算符，说明当前Babel配置未处理该语法，或者未对@react-leaflet/core包内的代码进行转译。

• 调整Babel配置支持ES2020语法：

  • 确保项目使用的@babel/preset-env已配置正确的目标环境，明确支持ES2020特性。示例babel.config.json配置：

    {
      "presets": [
        ["@babel/preset-env", {
          "targets": "> 0.25%, not dead",
          "useBuiltIns": "usage",
          "corejs": 3
        }],
        "@babel/preset-react"
      ]
    }
    

  • 若使用Create React App，默认Babel不会转译node_modules内的代码，需修改配置让其处理@react-leaflet相关包：
    • 借助react-app-rewired工具，在config-overrides.js中添加：

      const path = require('path');
      
      module.exports = function override(config) {
        const jsRule = config.module.rules.find(rule => rule.oneOf).oneOf.find(rule => rule.test.test('.js'));
        jsRule.include.push(path.resolve(__dirname, 'node_modules/@react-leaflet'));
        jsRule.include.push(path.resolve(__dirname, 'node_modules/@react-leaflet/core'));
        return config;
      };
      

• 检查@react-leaflet版本兼容性：

  • 旧版React项目（如React 16/17）可能不兼容最新版@react-leaflet（v4+），新版依赖更高版本的React和ES特性。可降级到适配版本，例如React 17对应@react-leaflet ^3.2.5，执行命令：

    npm install @react-leaflet@3.2.5 @react-leaflet/core@1.0.2
    

• 验证node/npm版本匹配度：

  • 查看项目package.json的engines字段，或依赖包官方文档，确认当前node/npm版本完全符合项目要求。部分旧依赖仅支持node 14/16等特定版本，需确保降级后的版本准确。

• 清理依赖缓存重新安装：

  • 执行以下命令清除缓存与旧依赖，重新安装以避免缓存导致的异常：

    rm -rf node_modules package-lock.json
    npm cache clean --force
    npm install
    

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