react-leaflet导入Map报错 更换MapContainer后解析失败如何解决

问题1：Attempted import error: 'Map' is not exported from 'react-leaflet' #

这个报错是因为react-leaflet v3及以上版本已经将原Map组件重命名为MapContainer，旧版本的导入语法不再适用。

问题2：替换为MapContainer后出现Unexpected token语法报错 #

报错中的??是ES2020新增的空值合并运算符，你的项目babel配置未支持该语法，导致无法解析@react-leaflet/core包中的代码。

解决方案（二选一即可） #

方案1：使用react-leaflet v3/v4版本（推荐） #

1. 确认依赖版本匹配要求：react >= 16.8，leaflet >= 1.7.0
2. 解决语法兼容问题，三选一即可：
   • 升级你的react-scripts版本到4.0以上（create-react-app项目），默认已支持ES2020语法
   • 手动安装babel插件：执行npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev，在babel配置文件的plugins数组中添加该插件
   • 配置webpack将@react-leaflet相关包加入babel转译范围
3. 代码调整示例：

import { MapContainer, TileLayer } from 'react-leaflet';
// 必须引入leaflet样式文件，否则地图样式会异常
import 'leaflet/dist/leaflet.css';

function Map() {
  return (
    <div className="map">
      {/* MapContainer必须显式设置宽高，否则地图无法渲染 */}
      <MapContainer 
        center={[51.505, -0.09]} 
        zoom={13} 
        style={{ height: "600px", width: "100%" }}
      >
        <TileLayer 
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
      </MapContainer>
    </div>
  )
}

方案2：降级使用react-leaflet v2版本 #

1. 先卸载现有版本：npm uninstall react-leaflet leaflet
2. 删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件，清除依赖缓存
3. 安装指定匹配版本：npm install react-leaflet@2.7.0 leaflet@1.6.0
4. 原Map组件导入语法可正常使用，同样需要引入leaflet样式文件并给地图设置宽高。

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