Source & layer issues with HMR in dev

[jasonhibbs]

Seen: While working on sources with multiple layers, after every edit & save, sources complain that they can’t be removed before layers, and layers complain they already exist, requiring a browser refresh after every edit.

  Desired: Ideally, layers and sources take care of themselves and don’t require refreshing the browser.

Repro:

1. have 1 source and 2 layers
2. edit a layer property, e.g. circle-color
3. see the console and an empty map
4. refresh to reload content

More detail: It may be relevant that I have grouped my source and layers into a component, like this:

app.vue

... 
<template>
  <MapboxMap map-id="map" :options="mapboxOptions">
    <MapLayerStations />
  </MapboxMap>
</template>
...

mapLayerStations.vue

...
<template>
  <MapboxSource source-id="stations-source" :source="sourceStations" />
  <MapboxLayer :layer="layerStationsCircles" @click="onClickStation" />
  <MapboxLayer :layer="layerStationsLabels" @click="onClickStation" />
</template>
...

Final thing to add, in similar projects, I vaguely recall resorting to making my slot conditional, but it may well be more convenient than robust:

<script lang="ts">
  ...
  this.map.on('load', () => {
    this.loaded = true
  })
  ...
</script>
<template>
  <slot v-if="loaded"/>
</template>

[AlexLavoie42]

What are you using to modify the layer? It seems like the source & layer are being re-added & the components are not unMounted (or re-added before they are able to be removed). Ideally modifying the layer should not require a reload of the layers/sources? I could be wrong here though.

If you are able to link a fork of the playground where you have reproduced this it would speed up debugging greatly.

[jasonhibbs]

Ah this is just during development, i.e. typing, saving, seeing browser updates. I’ll try to get a repro over soon.

[AlexLavoie42]

Ahh I see. Good chance this is just caused by Nuxts HMR replacing the source & layer component in a weird way. Shouldn't be a problem in real situations. I will work on adding some checks to avoid this though and try to make HMR work properly.

[abaza738]

Hello

I think I'm facing the same issues but not with HMR, page navigation causes this issue for me.
Also I think it's worth mentioning that I'm using <NuxtPage :keepalive="false" />.

I don't know if there's any other info that could be of use here, but I'm happy to help identify further causes and possibly also help implementing a fix :)

[AlexLavoie42]

Hello

I think I'm facing the same issues but not with HMR, page navigation causes this issue for me. Also I think it's worth mentioning that I'm using <NuxtPage :keepalive="false" />.

I don't know if there's any other info that could be of use here, but I'm happy to help identify further causes and possibly also help implementing a fix :)

Please open a new issue if this is happening to you in production, the original case here only happens while making changes in development.

If you are able to provide a reproduction I can look into what the issue is