Uncaught (in promise) TypeError: L.MarkerClusterGroup is not a constructor at L.markerClusterGroup (MarkerClusterGroup.js:1397:9)

[ajaythakkar]

• [ ] I'm reporting a bug, not asking for help
• [ ] I'm sure this is a Leaflet.MarkerCluster code issue, not an issue with my own code nor with the framework I'm using (Nuxt 3)
• [ ] I've searched through the issues to make sure it's not yet reported

---

How to reproduce

• Leaflet version I'm using: "^1.9.3"
• Leaflet.MarkerCluster version I'm using: "^1.5.3"
• OS/Platform (with version) I'm using: Windows 11
• Framework : Nuxt 3
• step 1 : Load first time index.vue
• step 2 : Change page horses/index.vue (/horses) and back to index.vue (/)

code

First time working after switch to page it is not working

  // Initialize the map
  const map = L.map('map').setView([0,0], 13);
  L.tileLayer('https://map.fit-q.net/osm/{z}/{x}/{y}.png', {
    attribution: '',
    maxZoom: 18,
    zoom: 2,
  }).addTo(map);
  map.setZoom(4);

  const circleWithText = (markers,latLng, txt, circleOptions) => {
    let pMarker = new L.Marker(latLng);
    pMarker = new L.Marker(latLng, {
      title: "txt",
      radius: 24.5,
      color: '#FFFFFF',
      weight: 3,
      fillOpacity: 1,
      fillColor: circleOptions.fillColor || 'green',
      icon: L.divIcon({html: `<b style="background-color: ${circleOptions.fillColor || "#964B00"}; color: white; border-radius: 50%; width: 50px; height: 50px; line-height: 20px; padding-top: 15px; display: inline-block; text-align:center;"> 1 </b>` })
    });
    markers.addLayer(pMarker);
    const group = L.layerGroup(markers);

    return(group);
  }

  //const markers = L.markerClusterGroup();
  const markers = L.markerClusterGroup({
      spiderfyOnMaxZoom: true,
      showCoverageOnHover: false,
      zoomToBoundsOnClick: true,
      iconCreateFunction: function (cluster) {
        return L.divIcon({html: '<b style="background-color: #964B00; color: white; border-radius: 50%; width: 50px; height: 50px; line-height: 20px; padding-top: 15px; display: inline-block; text-align:center;">' + (cluster.getChildCount() == 0 ? 1 : cluster.getChildCount()) + '</b>'});
      }
    });

  horsesLocation?.value?.value.forEach((horse, index) => {
      //console.log("horse single ",horse);
      if (horse.latitude && horse.longitude) {
        circleWithText(markers,
            [horse.latitude, horse.longitude], 1,
            {
              radius: 30, color: '#964B00',
              fillOpacity: 0.8, fillColor: '#964B00'
            }).addTo(map);
      }
  });

  console.log("markers : ",markers)
  map.addLayer(markers);
}```

[ajaythakkar]

This is worked for me. nuxt.config.js plugins: [ // Other plugins... { src: '~/plugins/leaflet-markercluster.js', ssr: false } ],

lugins/leaflet-markercluster.js

import L from 'leaflet';
import  "leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "leaflet/dist/leaflet.css";

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(L);
})