React 18+TypeScript中react-leaflet配置失败：模块解析错误求助

问题根源 #

报错里的??是空值合并运算符，属于ES2020语法。默认情况下，项目的Babel/Webpack不会转译node_modules中的代码，而@react-leaflet/core包未做向下兼容转译，导致构建工具无法识别该语法。修改browserslist无法解决此问题，因为它仅作用于项目自身代码的转译规则。

具体解决步骤 #

情况1：使用Create React App（CRA）初始化的项目 #

CRA默认不允许直接修改Webpack/Babel配置，需要借助craco来覆盖配置：

1. 安装依赖：

npm install @craco/craco --save-dev
# 或 yarn add @craco/craco -D

2. 在项目根目录创建craco.config.js文件，添加以下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 让babel-loader处理@react-leaflet相关包
      const babelRule = webpackConfig.module.rules.find(rule => 
        rule.oneOf && rule.oneOf.some(oneOfRule => oneOfRule.test && oneOfRule.test.toString().includes('js|jsx|mjs|cjs'))
      );
      
      if (babelRule) {
        babelRule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test && oneOfRule.test.toString().includes('js|jsx|mjs|cjs')) {
            oneOfRule.include = [
              ...(oneOfRule.include || []),
              /@react-leaflet/,
              /@react-leaflet\/core/
            ];
          }
        });
      }
      
      return webpackConfig;
    }
  }
};

3. 修改package.json中的启动脚本，替换为craco命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 删除node_modules、package-lock.json（或yarn.lock），重新安装依赖后启动项目：

rm -rf node_modules package-lock.json
npm install
npm start

情况2：自定义Webpack配置的项目 #

直接修改webpack.config.js中的module.rules，让babel-loader处理@react-leaflet相关包：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
          // 添加这两个包让babel转译
          path.resolve(__dirname, 'node_modules/@react-leaflet'),
          path.resolve(__dirname, 'node_modules/@react-leaflet/core')
        ],
        use: 'babel-loader'
      },
      // ...其他规则
    ]
  }
};

同时确保你的babel.config.js（或.babelrc）包含必要预设：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

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