I am trying to incorporate a leaflet map to my Nuxt 3 project. I use Nuxt Leaflet module which works fine until I tried to directly use the L
object from the leaflet
library. I followed the docs.
My component is wrapped in ClientOnly
component:
<ClientOnly fallback-tag="span" fallback="Loading venues ...">
<VenuesMapCluster :venues="data.venues" />
</ClientOnly>
The venue-map-cluster.vue
:
<template>
...
</template>
<script setup>
import L from 'leaflet'
...
</script>
However, this throws the following error:
The requested module 'http://localhost:3000/_nuxt/node_modules/leaflet/dist/leaflet-src.js?v=c19b9ad2' doesn't provide an export named: 'default'
These are my dependencies in the package.json
file:
"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"
}
How can I successfully load and use the L object from leaflet
in Nuxt 3?