React-mapbox-gl: Error when removing a layer

[gillioa]

Hi,

Sometimes, I got this error when I try to remove a layer from my map.

mapbox-gl.js:411 The layer '5948b9f3b506c203ba0d7baa' does not exist in the map's style and cannot be queried for features.
Uncaught TypeError: Cannot read property 'length' of undefined

Here is my code :

render() {
    console.log(this.state.locations)
    return (
      <div>
        <Map
          style="mapbox://styles/mapbox/streets-v9"
          containerStyle={{
            height: '100vh',
            width: '100vw'
          }}>
          {this.state.locations.length > 0 &&
            this.state.locations.map(l =>
              <Layer type="symbol" id={l.id} layout={{ 'icon-image': 'marker-15' }} key={l.id}>
                <Feature coordinates={[getFloat(l.longitude), getFloat(l.latitude)]} />
              </Layer>
            )}}
        </Map>
      </div>
    )
  }

On my page, I have a menu to select and unselect locations and it's modifying my locations array.
When I come on my page for the first time, my locations array is empty but I don't get any error. When I select a locations it's displaying a layer correctly on my map, but when I unselect some locations and remove it from my array, mapbox-gl.js is throwing this error. It seems to happen a bit randomly.

Thanks for your help.

[alex3165]

Hey @gillioa, The above code isn't really helpful, could you reproduce the bug using this boilerplate: https://github.com/alex3165/react-mapbox-gl-debug. That would be very helpful! thanks

[clydecbrown]

I get the same behavior in my own app. After a call to render() which removes a layer, I start to see these errors on pretty much any UI event, such as click, drag, or mouse movement. I dug into the react-mapbox-gl code a bit and verified that it is firing map.removeLayer(this.id) as expected inside componentWillUnmount(). But apparently some event handler is calling Style.queryRenderedFeatures() with the old set of layers to produce the error.

I merged @gillioa's into the debug example here. I added a timeout to clear this.state.locations. If you run it and interact with the map you'll see no errors it first. After the timeout, UI events produce a lot of:

mapbox-gl.js:416 The layer 'layer-1' does not exist in the map's style and cannot be queried for features.
mapbox-gl.js:390 Uncaught TypeError: Cannot read property 'length' of undefined

[clydecbrown]

Here is the underlying bug: https://github.com/mapbox/mapbox-gl-js/issues/5145. The fix should be in the next mapbox-gl-js release (0.40.0).

[clydecbrown]

...I verified the fix in react-mapbox-gl v2.6.0.

[Neuraxis]

I still have this issue. Added a raster layer like in the docs

<Map >
<Source id="source_id" tileJsonSource={RASTER_SOURCE_OPTIONS} />
<Layer type="raster" id="layer_id" sourceId="source_id" />
</Map>

but if I then want to remove it by return nothing to my map
<Map > </Map>

I get this error constantly:
mapbox-gl.js:417 The layer 'layer_name' does not exist in the map's style and cannot be queried for features.

Works fine when I add and remove GeoJsonLayers but with the Layers it breaks

[alex3165]

Hey @Neuraxis could you reproduce the issue with webpackbin ?

[Neuraxis]

no problem:
https://www.webpackbin.com/bins/-KzaNowltNXHzECiyxOe

look at dev tools to see the error

[Neuraxis]

Did you investigate the error in the above comment?