react-leaflet-draw导入报错：'MapControl'未从react-leaflet导出问题排查

嗨，这明显是react-leaflet和react-leaflet-draw的版本不兼容导致的问题，我来给你拆解下原因和解决方案：

错误根源 #

react-leaflet在v4.x版本做了模块结构调整：原来直接从react-leaflet导出的MapControl，现在被移到了react-leaflet/control子模块里。而你安装的react-leaflet-draw大概率是适配react-leaflet v3.x及以下版本的，它还是按照旧的导入方式去寻找MapControl，自然会找不到。

可行解决方案 #

方案1：降级react-leaflet到兼容版本 #

这是最稳妥的办法，直接把react-leaflet降到和react-leaflet-draw匹配的v3.x版本：

# 先卸载当前的react-leaflet
npm uninstall react-leaflet
# 安装兼容版本的依赖
npm install react-leaflet@3.2.5 react-leaflet-draw@0.20.4

安装完成后重启项目，原来的EditControl导入和使用代码不需要改，就能正常运行了。

方案2：使用适配react-leaflet v4的替代包 #

如果不想降级react-leaflet，可以尝试社区维护的适配v4版本的绘制组件，比如@react-leaflet-draw/core（注意这个包是实验性的，需要仔细看文档）。安装和导入方式会略有不同，比如：

npm install @react-leaflet-draw/core

然后在代码里导入对应的控件：

import { EditControl } from '@react-leaflet-draw/core'

额外提示 #

修改完依赖后，记得检查package.json里的版本号，确保react-leaflet和绘制组件的版本是匹配的，避免再次出现依赖冲突问题。

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