Leaflet LitElement引入插件报错"L is not defined"的解决方法咨询

报错原因 #

绝大多数Leaflet生态插件基于UMD规范开发，默认依赖全局作用域下的L对象。你通过ESM方式导入的Leaflet实例仅存在于模块局部作用域，没有挂载到全局，插件加载时找不到L就会抛出该错误。

解决方案 #

方案1：手动挂载全局L（最快适配，无需修改打包配置）

调整导入顺序，先导入Leaflet并挂载到window全局，再导入插件，示例代码：

import * as L from 'leaflet/dist/leaflet-src.esm.js';

// TypeScript 环境可先声明全局类型避免类型报错
declare global {
  interface Window {
    L: typeof import('leaflet');
  }
}
window.L = L;

// 挂载完成后再导入插件
import 'leaflet.markercluster';

导入完成后即可正常调用L.markerClusterGroup()使用插件功能。

方案2：打包器自动注入依赖（推荐生产环境使用，不污染全局作用域）

如果不想污染全局变量，可以通过打包器的依赖注入能力，自动给Leaflet插件注入本地导入的L实例，无需手动挂载全局。

• Vite 配置示例：
  先安装@rollup/plugin-inject依赖，再修改vite.config.ts：

  import { defineConfig } from 'vite';
  import inject from '@rollup/plugin-inject';
  
  export default defineConfig({
    plugins: [
      inject({
        L: 'leaflet',
      }),
    ],
  });
  

• Webpack 配置示例：
  修改webpack配置文件，使用内置的ProvidePlugin：

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.ProvidePlugin({
        L: 'leaflet',
      }),
    ],
  };
  

配置完成后原导入代码不需要修改，直接正常导入Leaflet和插件即可。

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