React-mapbox-gl: Error removing layer when using mapbox-gl 0.43.0

[jthetzel]

Mapbox-gl v0.43.0 introduces a breaking change that throws an error if a source is removed while still in use (e.g. remove a source prior to removing layers that use the source, https://github.com/mapbox/mapbox-gl-js/pull/5562 ). This was discovered in #491.

Example error:

mapbox-gl.js:546 Error: Source "example_id" cannot be removed while layer "example_id_marker" is using it.
    at t.removeSource (mapbox-gl.js:406)
    at e.removeSource (mapbox-gl.js:520)
    at Source.componentWillUnmount (source.js:71)
    at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11117)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at safelyCallComponentWillUnmount (react-dom.development.js:11125)
    at commitUnmount (react-dom.development.js:11415)
    at unmountHostComponents (react-dom.development.js:11356)

[jthetzel]

For reproducible example in example/demos, see toggle-layer demo at: https://github.com/jthetzel/react-mapbox-gl/commit/4872734cc807cdfa0ff11ecd2b8b2631b3f5efd8

[Wykks]

Yup I had to deal with this change in ngx-mapbox-gl too (https://github.com/Wykks/ngx-mapbox-gl/issues/10).
@alex3165 Instead of calling mapbox-gl method directly, we can buffer the removes request, then in the same frame after react work if possible process the removes in a defined order.

[alex3165]

Released with tag 3.5.0 of react-mapbox-gl

[redbmk]

Odd - I'm still getting this error when using mapbox-gl 0.43.0 and react-mapbox-gl 3.5.0. Same with 0.44.0 and 3.5.1. I might be doing something a little differently than the examples. I'll see if I can tweak the them to reproduce this.

[redbmk]

It turns out I was seeing the bug when swapping out tileJSON sources. I opened PR #530 to fix it.

[alex3165]

Published a fix from @redbmk in version 3.8.0, enjoy! 👍