TypeError: Cannot read properties of undefined (reading 'optIn')

[mbajur]

Hey! I'm trying to initialize a simple Leaflet instance with Geoman plugin enabled. I followed all the tutorials i was able to find anywhere on the internet but the following error persists: TypeError: Cannot read properties of undefined (reading 'optIn') on L.map line.

My code looks as follows:

import * as L from 'leaflet19';
import "@geoman-io/leaflet-geoman-free";

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);

I'm on leaflet 1.9.4 ("leaflet19": "npm:[email protected]") and @geoman-io/leaflet-geoman-free 2.18.3. Thanks in advance for any ideas!

PS. Just to make it clear: Map works just fine without the geoman import. It's the geoman import what breaks it.

[Falke-Design]

I think the problem is on line 65:

leaflet-geoman/src/js/L.PM.js

Lines 61 to 67 in 4a08abb

	addInitHooks() {
	function initMap() {
	this.pm = undefined;
	if (L.PM.optIn) {
	if (this.options.pmIgnore === false) {
	this.pm = new L.PM.Map(this);

It looks like leaflet-geoman is not available on your leaflet variable L. Something with the import must be wrong.
Please try console.log(L.PM) before you create the map.

https://plnkr.co/edit/wLJmy9GQP05Mgcji

[mbajur]

Thank you for rapid reply! This console.log you asked for is giving me undefined

[Falke-Design]

Then you need to change something in your import

[mbajur]

You have anything specific on your mind? Is there anything that esbuild might be messing up? I frankly don't see anything special about my setup, it's very basic.