Error when unmounting <Map/> with mapbox plugins child components

[amaury1093]

I'm encountering an issue when unmounting a <Map /> which contains react-mapbox-gl-draw as a child component, following the small tutorials given in #299 and #106.

To reproduce this error, see this issue on my repo. An example bin can be seen here: https://www.webpackbin.com/bins/-Kui3N3_WHjyu9kPpBWv, where basically draw.js is the full source code I have for react-mapbox-gl-draw

If I remove this.context.map.removeControl(...) from the componentWillUnmount of the child component, no errors. After some quick investigation, I found out that this.context.map has a null style field in componentWillUnmount, whereas this field is not null in the other phases of the component lifecycle. But I don't know where to go from here.

[born-curious]

+1: Facing the exact same problem.

[alex3165]

The instance of map might not be here when you unmount the Draw component as the Map component remove it when being unmounted so in this case there is no control to remove to the map as it is not there anymore.

Here is the fix: https://www.webpackbin.com/bins/-KusWPlfO_lIuHNb4tL4

See: https://github.com/alex3165/react-mapbox-gl/blob/master/src/layer.ts#L297

[amaury1093]

Yes, makes sense. Thanks!

[gabeamaleoni]

@amaurymartiny @alex3165 - I believe this is still an issue.

First off, the webpackbin.com site has been deprecated. Is there any reproduction/fix for this issue on codesandbox?

When I attempt to unmount an <Map /> component that has the <DrawControl /> component as a child, I get an error: Uncaught TypeError: Cannot read property 'getLayer' of undefined which seems to be looking for a map object that no longer exists since the route has changed and the parent component has unmounted.

Here's my setup in package.json:

"@mapbox/mapbox-gl-draw": "1.1.1",
"react-mapbox-gl": "4.4.0",
"mapbox-gl": "0.54.0",
"react-mapbox-gl-draw": "1.0.6",
"react": "16.8.6",

Any ideas on how to fix this? Been stuck on this trying various hacks within my parent's componentWillUnmount to no avail for hours.

Thanks!

[ev0065]

@gabeamaleoni Were you able to make it work? I'm facing a similar enough issue: index.js:14 Uncaught TypeError: map.getStyle is not a function and was wondering if they were related.

[ganeshrvel]

@alex3165

The url https://www.webpackbin.com/bins/-KusWPlfO_lIuHNb4tL4 is unavailable at this moment. Could you please create a new codepen for the same?

[IvanAbadzhiev]

Hello, Guys, I have the same problem now, did you manage to fix it. When I am unmounting the Map with DrawerControl it crashes, if I remove the DrawerControl it is working. Uncaught TypeError: Cannot read property 'getLayer' of undefined

[clarkbynum]

Hope this helps someone - in my project we're using react-router to navigate to a different page when a polygon is clicked but this caused the Cannot read property 'getLayer' of undefined error. We fixed the error by wrapping our call to react-router's nav in a setTimeout. Here's a boiled down code snippet -

const nav = useNavigate();

return (
<Polygon
    polygon={a.polygon}
    onClick={() => {
        setTimeout(() => {
            nav('to-other-page');
        }, 0);
    }
/>
)