如何修复React-Leaflet地图“You may need an additional loader”报错

这个报错是因为你当前使用的react-leaflet v4及以上版本代码中使用了ES2020的空值合并运算符??，你的项目Babel配置默认不会转译node_modules目录下的代码，导致编译时无法识别该语法。

方案一：降级兼容（最快捷，无需修改配置） #

直接安装适配旧编译环境的版本，执行安装命令：
npm install react-leaflet@3.2.5 leaflet@1.9.4
该版本的react-leaflet未使用高版本ES语法，无需额外配置即可正常编译。

方案二：修改编译配置适配高版本 #

如果需要使用react-leaflet v4的新特性，按照你使用的项目脚手架修改配置：

• 自定义webpack项目：修改webpack配置中babel-loader的规则，放开对@react-leaflet、react-leaflet包的转译限制：

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

同时在Babel配置中添加空值合并运算符转译插件：
执行安装命令：npm install @babel/plugin-proposal-nullish-coalescing-operator -D
在babel.config.js的plugins数组中添加："@babel/plugin-proposal-nullish-coalescing-operator"

• create-react-app未eject项目：安装react-app-rewired、customize-cra后，在根目录创建config-overrides.js添加上述babel配置即可。

使用前注意三点：

• 必须引入leaflet的全局样式文件
• MapContainer外层容器必须明确指定高度，否则地图无法正常渲染
• 使用Marker组件时需要修复默认图标路径，否则标记点不会显示

完整代码：

// 导入依赖
import 'leaflet/dist/leaflet.css'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import L from 'leaflet'

// 修复Marker默认图标不显示的问题
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
})

function App() {
  return (
    {/* 外层容器必须指定高度 */}
    <div style={{ height: '600px', width: '100%' }}>
      <MapContainer
        center={[51.0, 19.0]}
        zoom={4}
        maxZoom={18}
        style={{ height: '100%', width: '100%' }}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        {/* 标记点 */}
        <Marker position={[51.0, 19.0]}>
          <Popup>
            这里是示例标记点
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  )
}

export default App

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