pb on reloading same page

[iNeoO]

Hi got a problem with the integration of the module

got a pb on this repo

https://github.com/SocialGouv/vao

Unhandled error during execution of unmounted hook 
  at <Anonymous url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="&copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors" layer-type="base"  ... > 
  at <Anonymous ref="map" zoom=16 center= (2) [48.533089, 7.772417]  ... > 
  at <DsfrFieldset legend="Informations sur le lieu de l'hébergement" > 
  at <Hebergement init-hebergement= {nom: 'coucou', dateFin: '2024-07-31T22:00:00.000Z', dateDebut: '2024-07-23T22:00:00.000Z', coordonnees: {…}, hebergementId: 1, …} is-disabled="" cdn-url="http://localhost:3010/documents/"  ... > 
  at <[hebergementId] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <Anonymous key="/hebergements/pour-sejour()/4()/1()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/hebergements/pour-sejour/4/1', path: '/hebergements/pour-sejour/4/1', query: {…}, hash: '', name: 'hebergements-type-demandeSejourId-hebergementId', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for '_leaflet_id' in undefined
    at stamp (leaflet-src.esm-IDLFMH26.js?v=a5d52f79:35:23)
    at NewClass.removeLayer (leaflet-src.esm-IDLFMH26.js?v=a5d52f79:4475:14)
    at RefImpl.removeLayer (@vue-leaflet_vue-leaflet.js?v=a5d52f79:1419:29)
    at t (@vue-leaflet_vue-leaflet.js?v=a5d52f79:66:22)
    at u (@vue-leaflet_vue-leaflet.js?v=a5d52f79:169:57)
    at @vue-leaflet_vue-leaflet.js?v=a5d52f79:212:41
    at runtime-core.esm-bundler.js?v=a5d52f79:1804:40
    at callWithErrorHandling (runtime-core.esm-bundler.js?v=a5d52f79:193:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?v=a5d52f79:200:17)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?v=a5d52f79:1784:19)

With https://github.com/SocialGouv/vao/blob/feat/502/packages/frontend-bo/src/pages/hebergements/%5Btype%5D/%5BhebergementId%5D.vue

or https://github.com/SocialGouv/vao/blob/feat/502/packages/frontend-bo/src/pages/hebergements/%5Btype%5D/%5BdemandeSejourId%5D/%5BhebergementId%5D.vue

Switching between these page and going back on the same page create this problem

Maybe i'm doing wrong, any idea why the unmounted is wrongly executed ?

[Gugustinette]

Hi !

I tried to get every info so you can better understand the error, where it comes from, and how to fix it :

Debugging info

Leaflet side

The error seems to be thrown from Leaflet in Layer.removeLayer by Util.stamp (Layer is a class extended by Marker, Map and pretty much every Leaflet component).

This line seems to throw an error because the object given is undefined.

Vue Leaflet side

Vue Leaflet runs some code when a component is unmounted, including this line which call removeThisLayer. This is a function defined on component setup that calls Layer.removeLayer and gives the current component's leafletObject in parameter. This means the leafletObject ref from LMap/LMarker gives a .value of undefined when unmounting the component.

This seems related to https://github.com/vue-leaflet/vue-leaflet/issues/52 which mention the onUnmounted code being called twice for some reason.

Fix

From what I understand of your codebase, code such as the inline map here or slotted map here are using v-if to show the map only if an address is defined. As mentioned here, potential fixes you could try are : using v-show, moving the statements directly to childrens ...

[iNeoO]

Ok i find a way with some v-show, thx

[iNeoO]

In fact removing all v-if v-show doesn´t fix the problem :/

[iNeoO]

removeLayer is called with no params at the loading creating the error

[Gugustinette]

Could also be related to https://github.com/vue-leaflet/vue-leaflet/issues/340

Definitely an issue from Vue Leaflet, so I guess it should be opened on Vue Leaflet repo. As Vue Leaflet development seems "paused" (no release for a year) I'll see if I can get my hands on it to help fixing it.

[iNeoO]

For the moment i will just hide component on pages with trouble to merge my branch I would be very interested if a solution is found.

[Gugustinette]

If no solution can be found in decent times, maybe it's also worth trying https://gugustinette.github.io/nuxt-maplibre/ which could work better.

They also support markers : https://indoorequal.github.io/vue-maplibre-gl/examples/marker.html

[iNeoO]

Ah really thx, maybe we will give a try to this, i will talk about it with other ppl Thx !