Integration with Nuxt 3

[danielkjcoles]

I'm trying to use leaflet-geoman on a Nuxt 3 project I'm messing with, but can't seem to get it to work.

I have my component wrapped in <ClientOnly> and registered in a client-side only plugin. In my component I import leaflet and initialise my leaflet map. All works as expected, lovely.

Now, after I import leaflet I try to import leaflet-geoman in the component using import '@geoman-io/leaflet-geoman-free'; to which in the console I get the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'POLYGON_CLIPPING_MAX_QUEUE_SIZE')
I've tried importing leaflet-geoman later once the component is mounted, but the same error.

Any help would be appreciated, as I am stumped.

Cheers!

[Falke-Design]

have you tried Lazy Loading?

[danielkjcoles]

Thanks for the suggestion! I just gave this a shot but unfortunately I am still getting the same error.

[danielkjcoles]

My bad, had to transpile leaflet-geoman. All good now.

[ejfox]

@danielkjcoles I am running into a similar issue, can you share what you ended up doing to fix it?

[danielkjcoles]

@ejfox Sure I just added it to the build/transpile options in the nuxt config file.
Like so:

build: {
    transpile: ['leaflet-geoman'],
},