Ошибка листовки> ReferenceError: L не определен

Один странный факт заключался в том, что при первом сохранении кода карта идеально отображалась на экране. Но это было только в этот раз.

Я не знаю, что происходит. Код выглядит идеально, и я не знаю, что означает эта ошибка в консоли.

Я не могу исправить эти ошибки:

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>

и:

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)

Мой компонент LeafletMap:

<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 class = "relative h-96 w-full" ref = "mapContainer"></div>
</template>
<style scoped>
@import 'https://unpkg.com/[email protected]/dist/leaflet.css';
</style>

Реквизиты идут к компоненту:

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