importing `L` throws an error, `useMarkerCluster` is not defined

[druskacik]

I am trying to use the Leaflet.markercluster for my map, and I have two errors that are possibly related. I am following this documentation page.

These are my dependencies:

"dependencies": {
    "@nuxt/fonts": "^0.7.1",
    "@nuxt/icon": "^1.0.0",
    "@nuxt/ui": "^2.17.0",
    "@nuxtjs/leaflet": "^1.0.14",
    "knex": "^3.1.0",
    "leaflet.markercluster": "^1.5.3",
    "nuxt": "^3.12.3",
    "objection": "^3.1.4",
    "pg": "^8.12.0",
    "vue": "latest"
  }

venue-map-cluster.vue:

<template>
  <LMap
        ref="map"
        :use-global-leaflet="true"
        @ready="onMapReady"
  >
       ...
      </LMap>
</template>

<script setup>

import L from 'leaflet'

const map = ref(null)

const onMapReady = () => {
  useMarkerCluster({
    leafletObject: map.value.leafletObject,
    markers: locations,
  });
}

onMounted(async () => {
  console.log('L', L)
})

</script>

The VenuesMapCluster component is wrapped in the ClientOnly component:

<ClientOnly>
  <VenuesMapCluster :venues="data.venues" />
</ClientOnly>

The setup above throws this error (the page does not load):

The requested module 'http://localhost:3000/_nuxt/node_modules/leaflet/dist/leaflet-src.js?v=c19b9ad2' doesn't provide an export named: 'default'

If I replace import L from 'leaflet' with import * as L from 'leaflet', the page loads, but there's following error in the console:

useMarkerCluster is not defined

I tried reinstalling the node modules and the error still persists. How can I use marker clustering in Nuxt 3? Thanks!

[Gugustinette]

Hi !

The useMarkerCluster composable wasn't exposed since v1.1.0 which was released 5 minutes ago lol. Please update your version of @nuxtjs/leaflet and see how it goes ! 😄

[druskacik]

Hm, I see you :D Thanks, I updated it and it works like charm.

But I wonder, does import L from 'leaflet' work for you? (That's how L is imported in the docs.) It doesn't for me, but import * as L from 'leaflet' solves it.

[Gugustinette]

Cool !

Yeah import L from 'leaflet' actually works for me with a Client-only page.