Leaflet LitElement "L is not defined" in Plugin

Question

I am using Leaflet in a LitElelement webcomponent. Leaflet itself works great.

But when I want to include a plugin I get the error "L is not defined" from the plugin. I installed Leaflet and the plugin (markercluster) via npm and use it in a Typescript module.

So far I include it like this:

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

And get the following error:

MarkerClusterGroup.js:5 Uncaught ReferenceError: L is not defined
    at MarkerClusterGroup.js:5
    at leaflet.markercluster-src.js:10
    at leaflet.markercluster-src.js:11*

How do I have to include plugins to make this work?

Answer 1

Leaflet plugins doesn't support ESM/ES6 imports well.

According to this comment you should be able to get leaflet.markercluster to work.

import { Map, Marker,  } from "leaflet";
import { MarkerClusterGroup } from "leaflet.markercluster/src";

...
let mcluster = new MarkerClusterGroup({ chunkedLoading: true });