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

[calvinmetcalf]

if in one file (lets call it leaflet-base.js) you put in

import * as L from 'leaflet/dist/leaflet-src.esm.js';
globalThis.L = {};
for (const [key, value] of Object.entries(L)) {
    globalThis.L[key] = value;
}
import "leaflet/dist/leaflet.css";

then in another file (lets call it leaflet-more.js) you put in

import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

then in a 3rd (lets call it leaflet.js)

import './leaflet-base.js';
import './leaflet-more.js'

export default globalThis.L;

then you can just do import L from './leaflet.js' and it will work.

geoman (and a lot of leaflet extensions) are written in an object oriented way that makes it hard to turn into es modules without a big rewrite (this isn't their fault it was the "recommended way" to do leaflet)