React Leaflet引入后报Module parse failed缺少loader错误怎么解决

问题原因 #

• 报错指向的??是空值合并运算符，属于ES2020新增语法
• 你当前项目使用的react-scripts（React官方脚手架工具）版本低于v5，默认不会对node_modules目录下的第三方包做该语法的转译
• React Leaflet v4及以上版本的源码中使用了该语法，因此会被babel-loader识别为非法字符抛出解析错误
• 你之前在index.html引入的官方CSS、JS脚本仅能解决运行时的依赖缺失问题，本次报错属于编译阶段的语法解析错误，因此该操作无法解决问题

推荐解决方案 #

方案一：降级React Leaflet到兼容版本（操作最简单，无需修改项目配置） #

先卸载当前已安装的版本，再安装v3.x兼容版本：

# 卸载现有版本
npm uninstall react-leaflet leaflet
# 安装兼容低版本react-scripts的版本
npm install react-leaflet@3.2.5 leaflet@1.7.1

安装完成后重启项目即可正常运行。

方案二：升级react-scripts到v5及以上版本 #

如果需要使用最新版React Leaflet的特性，可以升级脚手架版本：

npm install react-scripts@latest

升级完成后删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖后启动项目。

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