Import geoman with leaflet as an es module

[AronSchoffer]

I have trouble importing geoman after importing leaflet as an es module.

This works fine:

import './node_modules/leaflet/dist/leaflet.js';
import './node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js';

This doesn't:

import * as L from './node_modules/leaflet/dist/leaflet-src.esm.js';
import './node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js';

and gives the following error: leaflet-geoman.min.js:1 Uncaught ReferenceError: L is not defined.

Here is repo with a minimal example: https://github.com/AronSchoffer/import-geoman-with-leaflet-as-esm

I want to import leaflet as esm because typescript gives me errors otherwise. Maybe more importantly, importing leaflet as an es module allows for partial imports e.g. import {map} from leaflet.

Does geoman support importing leaflet as an es module? If so, how do I do this properly? Any workarounds would also be appreciated. Thanks!

[Falke-Design]

Please try Lazy Loading.

[AronSchoffer]

That still gives the same error. I am not using a bundler, could that be a problem?

I updated the repo so it now tries to lazy load geoman, if you want to see for yourself.

[ykparkwixon]

I cannot get js on https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js

I can't see the map on https://geoman.io/leaflet-geoman also.

What happened?

[AronSchoffer]

Any news on this? If I understand correctly, Leaflet is moving towards esm support so shouldn't this be working if Leaflet officially starts supporting esmodules?

My use case is that I want to use the Leaflet map in a vanilla web component which in turn can be embedded in a different site. So I'd rather avoid globally importing Leaflet.

[AndrejGajdos]

I have the same issue