bug: unstable leaflet.markercluster support

[enekobyhours]

Hi,

I have started a new Nuxt project (version 3.12.4) using the code provided in the Nuxt Leaflet Marker Cluster documentation. However, the markers are not displaying as expected.

I have configured the project with ssr: false, but the issue persists.

Am I missing something in the setup? Any help would be appreciated. Thanks!

[Gugustinette]

Hi !

Any error in your browser console or server logs ?

[enekobyhours]

Yes, sorry.

I am getting this error: Uncaught (in promise) TypeError: MarkerClusterGroup is not a constructor wich comes from the line const markerCluster = new MarkerClusterGroup(); in useLMarkerCluster.js file.

[Gugustinette]

That's weird, I would expect such error to happen if you didn't activate the plugin or so.

Can you provide a reproduction ?

[enekobyhours]

https://stackblitz.com/edit/github-ab7plw?file=app.vue

[Gugustinette]

Well I think I found a temporary fix that specify the import of leaflet.markercluster before calling the composable :

// When the map is ready
const onMapReady = async () => {

  // Temp fix
  await import('leaflet.markercluster')

  useLMarkerCluster({
    leafletObject: map.value.leafletObject,
    markers: locations,
  });
};

But still, I don't know where the error come from. 😕

[tratteo]

Just following up here. I am having a similar problem, I am getting this error:

I have tried to include the manual import of the leaflet.markercluster as follows but the problem is persisting:

        // Added this
        await import('leaflet.markercluster')
        const res = await useLMarkerCluster({
            leafletObject: mapEl.value!.leafletObject,
            markers: props.clusteredMarkers.map((m) => ({
                name: m.id,
                lat: m.coords[0],
                lng: m.coords[1],
                popup: m.popup,
            })),
        });

Update
I am getting this error only when building for production, in development I do not get this error

[Gugustinette]

Yeah I remember getting this kind of production-only error, and I must say I don't know what the fuck is going on lol

I spent hours trying to debug why is this behaving so weirdly, that seems like a combination of :

• Leaflet being an old browser library, which has plugins that expects L to be loaded as a global variable to extend its features.
  • Which makes writing Nuxt Leaflet very hard (even though the code is pretty light and straight forward)
• Weird build-time behavior with Nitro or Rollup or esbuild,...

I'm clearly laking some expertise here, and I must say the error is very hard to reproduce, it seems sometimes the browser will cache L, sometimes not,... The error itself is unstable 😭

[tratteo]

Yeah I am seeing that the error is not easily reproducible. I can do some tests by deleting cache and stuff, and checking in which situation it presents again.
However, at the moment it is giving me the error 100% of the time.
Is there something I can help with?
Is there a way to force the global loading of the L variable?

I really wanna help, also because I am building a product with map functionalities.
Let me know if I can help in any way!

[Gugustinette]

Well It would be great to provide a Stackblitz reproduction.

[tratteo]

Update, I tried creating a fresh new project and setup the most minimal example, with the code provided here. Everything works fine in development mode, but still getting the same error upon running the built project:

I am investigating.

[tratteo]

@Gugustinette
Here is a link of a StackBlitz project I just created. It works in development but running it in production gives the same object is not extensible error.
Project link: https://stackblitz.com/edit/nuxt-starter-p1tmxs?file=package.json

Can build and run project with

bun run build && node .output/server/index.mjs

[Gugustinette]

Well I just tested it and got this error in development mode 😭

[tratteo]

Yep, I was writing about that too but I saw that that error is indeed random, hence it happens sometimes, really do not know in which situations...
However the error in production happens always.

Few weeks ago I was using the same stack and I did not encounter these errors.
Has there been an update either to leaflet, @nuxtjs/leaflet or leaflet.markercluster? Can we try a rollback somehow?

[Gugustinette]

No significative update as far as I know, and I encountered these behavior even at the beginning of developing @nuxtjs/leaflet.

We would probably need the help of a more experienced person here.

[tratteo]

I did some testing with the app I am building and I can confirm the problem seems strictly related to the leaflet.markercluster package. Displaying markers without clusterization seems to work perfectly in every situation, never had a problem.

However, I was not able to exactly understand where the problem is with the package 🫠