One strange fact was that the first time I saved the code, the map appeared perfectly on the screen. But it was only this one time.

I don't know what is going on. The code looks perfect, and I don't know what this error in the console means.

I am unable to fix these errors:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of mounted hook 
  at <LeafletMap lat=-20.3612397 lng=-40.2958806 > 
  at <[id] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <Anonymous key="/anuncio/kqnceP5qQ3QTl0d9wrFM" routeProps= {Component: {…}, route: {…}} pageKey="/anuncio/kqnceP5qQ3QTl0d9wrFM"  ... > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default > 
  at <Anonymous key="default" name="default" hasTransition=true > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

and:

Uncaught (in promise) ReferenceError: L is not defined
    at LeafletMap.vue:24:1
    at runtime-core.esm-bundler.js:2723:40
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2697:29)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:341:32)
    at flushJobs (runtime-core.esm-bundler.js:395:9)

My LeafletMap component:

<script setup>
const props = defineProps({
    // props go here
    lat: {
        type: Number,
        required: true
    },
    lng: {
        type: Number,
        required: true
    }
})
// leaflet map 1.9.2
const map = ref(null)
const marker = ref(null)
const mapContainer = ref(null)
const mapOptions = {
    center: [props.lat, props.lng],
    zoom: 13,
    zoomControl: false
}
// load map
onMounted(async () => {
    map.value = await L.map(mapContainer.value, mapOptions)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map.value)
    marker.value = await L.marker([props.lat, props.lng]).addTo(map.value)
})
// update marker position
watch(
    () => props.lat,
    () => {
        marker.value.setLatLng([props.lat, props.lng])
        map.value.setView([props.lat, props.lng], 13)
    }
)

watch(
    () => props.lng,
    () => {
        marker.value.setLatLng([props.lat, props.lng])
        map.value.setView([props.lat, props.lng], 13)
    }
)

// destroy map
onUnmounted(() => {
    map.value.remove()
})
</script>

<template>
    <div  ref="mapContainer"></div>
</template>
<style scoped>
@import 'https://unpkg.com/[email protected]/dist/leaflet.css';
</style>

The props are going to the component:

<LeafletMap :lat="ad.geolocation.lat" :lng="ad.geolocation.lng" />

CodePudding user response：

OP solved the issue by importing Leaflet

const L = await import('leaflet')