ReactMapboxGl style switching: The layer 'layer-1' does not exist in the map's style and cannot be queried for features.

<ReactMapboxGl
      style={getMapStyle()}
>
  <Layer
    type="line"
    layout={{ 'line-cap': 'round', 'line-join': 'round' }}
  >
    <Feature coordinates={props.coordinates} />
  </Layer>
</ReactMapboxGl>

If I have the layer object, the following error is produced when I switch Map styles (getMapStyle() returns a different style…in this case it’s from ‘mapbox://styles/mapbox/streets-v9’ to ‘mapbox://styles/mapbox/satellite-streets-v9’) “The layer ‘layer-1’ does not exist in the map’s style and cannot be queried for features.”

There’s also the following error trace:

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at e.Layer._this.onMouseMove (eval at <anonymous> (bundle.js:10513), <anonymous>:76:21)
    at e.Evented.fire (eval at <anonymous> (bundle.js:10483), <anonymous>:237:700)
    at h (eval at <anonymous> (bundle.js:10483), <anonymous>:183:1330)
    at HTMLDivElement.a (eval at <anonymous> (bundle.js:10483), <anonymous>:183:788)

[z0d14c]

btw this issue (or a very similar one) will also manifest itself not just when changing styles, but also for example:

1. Be on page A
2. Navigate to Page B which has a <ReactMapboxGL /> element with various <Layer />s and such in it
3. Quickly navigate to page A before all of the sources have been successfully added/loaded on to the map. ReactMapboxGL will be unmounted, causing all of the children to be unmounted, resulting in these errors being thrown.

[alex3165]

I was playing with mapbox-gl and found out that the problem is actually coming from react-mapbox-gl, I will work on it asap.

https://jsfiddle.net/alex3165/acr3ykz5/