How to import mapbox-gl-leaflet in ESM

[Anubarak]

How can I actually use this plugin? I tried many different things and searched around the internet, but nothing worked.

import * as Default from 'mapbox-gl-leaflet'
console.log(Default); --> undefined

is undefined

import MapboxGL as 'mapbox-gl-leaflet'

throws Cannot read properties of undefined (reading '__esModule'). I even tried things like

import {mapboxGL} from 'mapbox-gl-leaflet'

But nothing worked. Can you please explain me how to use the script?

Edit: or in other words: This is my code, how can I make this working

import {map, latLngBounds, latLng} from 'leaflet';
import { mapboxGL } from 'mapbox-gl-leaflet';
const myMap = map(mapContainer, {
    zoom: 9,
    maxZoom: 18,
    minZoom: 7,
    center: [
        50.9787,
        11.03283
    ],
    maxBounds: latLngBounds(latLng(47.3024876979, 5.98865807458), latLng(54.983104153, 15.0169958839))
});
const gl = mapboxGL({
    style: '// some url'
}).addTo(myMap);

[jdevos360]

Try import 'mapbox-gl-leaflet'

[Anubarak]

Thank you - and how can I then use the function?

const gl = mapboxGL({
    style: '// some url'
}).addTo(myMap);

throws an error obviously

[jdevos360]

import * as L from 'leaflet';

L.mapboxGL({ style: '// some url' }).addTo(myMap);

[Anubarak]

That will eliminate the ability to treeshake the ESM module - the bundle size will be much larger after my tests. So I guess there is no way that supports a smaller bundle size?