Actualmente estoy creando una aplicación vue3 cli que usa vue- leaflet (la versión compatible con vue3)

Todo funciona muy bien en mi entorno de desarrollo local, pero una vez que mi aplicación está construida, el mapa no se carga, incluso cuando cambio el tamaño como lo explica bien este hilo .

Intenté usar el método leafletObject.invalidateSize() pero nada cambió.

Mi mapa es un componente llamado usando un v-if en la primera llamada (alternar entre una vista de lista y el mapa) y un v-show una vez que se ha inicializado

 <transition name="fade" mode="out-in"> <Map v-if="mapInit" v-show="(!mobileView && !listing) || (mobileView && !listing && !getFiltresMobile)" :liste="getFilteredList"/> </transition>

Esto es lo que obtengo en mi versión de desarrollo cuando uso npm run serve

Aquí está el resultado en la versión prod.

Aquí está la parte relevante de mi código, puedo agregar más si cree que es necesario mostrar más código

 <template> <div id="map"> <l-map v-if="!loading" :style="mapHeight" :zoom="zoom" :center="centerValue" :options="{tap : false}" ref="map"> <l-tile-layer :url="url"></l-tile-layer> <l-marker v-for="(marqueur) in mapData" :key="marqueur.id" :visible="isFiltered(marqueur)" :lat-lng="marqueur.latLng" :ref="setMarkerRefs" @click="markerClick(marqueur.latLng)"> <l-icon :icon-url="checkActive(marqueur.latLng)" :icon-size="[30 , 37]" :popup-anchor="popupUpPosition" :icon-anchor="[15, 37]"/> <l-popup :options="popupoptions"> <MarqueurPopup :contenu="marqueur"/> </l-popup> </l-marker> </l-map> <Loader v-if="loading"/> </div> </template>

JS

 <script> import "leaflet/dist/leaflet.css" import { LMap , LTileLayer , LPopup , LMarker , LIcon } from "@vue-leaflet/vue-leaflet"; export default { name: "Map", props : ['liste'], components: { Loader, MarqueurPopup, LMap, LTileLayer, LMarker, LPopup, LIcon, }, data() { return { url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', zoom: 13, mapData : [], markerRefs : [], markerRefsDef : [], popupoptions : { maxWidth : 1000, minWidth : 300, closeButton : false, } }; }, beforeMount() { this.initMap() }, mounted() { setTimeout( () => { console.log(this.$refs.map.leafletObject) // returns the leaflet map objects this.$refs.map.leafletObject.invalidateSize(); // no error but does nothing }, 1000); }, computed : { popupUpPosition() { if (window.innerWidth < 768) { return [0, 74] } return [0, -37] }, mapHeight() { let colonneValue = window.innerWidth / 12; if (colonneValue < 115) { colonneValue = 115 } let height = window.innerHeight - colonneValue; return {height : height+'px'} }, }, methods : { async initMap() { this.$store.commit('changeLoading' , true); this.mapData = [] this.mapData = this.getFilteredList this.$store.commit('changeLoading' , false); }, } } </script>

¿Hay alguna forma de verificar si los métodos invalidateSize() se activan? Mi console.log no recibe errores, pero nada cambia, ¿así que tal vez no active el método?