使用Vite+react-leaflet-draw绘制矩形报错：Uncaught ReferenceError

这个错误的根源是leaflet-draw（react-leaflet-draw的依赖）的矩形绘制模块存在未声明变量的代码：在Rectangle.Draw.js里有一行type = 'rectangle';未使用var/let/const声明，Vite默认的ES模块严格解析模式会触发这类隐式全局变量赋值的ReferenceError，而Webpack的打包机制对这类问题容忍度更高，因此不会报错。

解决方案1：用patch-package修复依赖代码 #

这是最直接彻底的方法，通过修改依赖文件并生成补丁，确保每次安装依赖后自动应用修复：

1. 找到node_modules/leaflet-draw/dist/leaflet.draw.js，搜索到包含type = 'rectangle';的代码块，将其修改为const type = 'rectangle';（或var type = 'rectangle';）。
2. 安装patch-package开发依赖：

npm install patch-package --save-dev

3. 生成针对leaflet-draw的补丁：

npx patch-package leaflet-draw

4. 在package.json的scripts字段中添加postinstall脚本，确保依赖安装后自动应用补丁：

"scripts": {
  // 其他脚本...
  "postinstall": "patch-package"
}

解决方案2：升级leaflet-draw版本（尝试兼容） #

react-leaflet-draw@0.20.4依赖leaflet-draw@^1.0.4，你可以通过包管理器的覆盖功能升级到修复了该问题的版本：

• 对于npm，在package.json中添加：

"overrides": {
  "react-leaflet-draw": {
    "leaflet-draw": "1.0.6"
  }
}

• 对于yarn，在package.json中添加：

"resolutions": {
  "react-leaflet-draw/leaflet-draw": "1.0.6"
}

然后重新安装依赖：npm install或yarn install，测试矩形绘制功能是否恢复正常。

临时解决方案：Vite全局变量声明（不推荐） #

如果需要快速临时解决，可在vite.config.js中声明全局变量规避错误，但这种方法不够优雅，可能引发潜在问题：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'type': 'undefined'
  }
})

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