search

aviklai / react-leaflet-google-layer

Google layer for React-Leaflet using leaflet.gridlayer.googlemutant, implemented with typescript
MIT License
49 stars 8 forks source link

Module breaks when updating to react-leaflet@3.2.4 #26

Closed simonnilsson closed 2 years ago

simonnilsson commented 2 years ago

Breaks on updating from v3.2.3 to v3.2.4.

The change made was: Fix removing the map handlers when MapContainer is unmounted.

https://github.com/PaulLeCam/react-leaflet/commit/9f88d1112f7baa287256a25b1c72da0904e83711

Leads to this error:

Uncaught ReferenceError: google is not defined
    at NewClass.onRemove (Leaflet.GoogleMutant.js:108)
    at NewClass.removeLayer (leaflet-src.js:6641)
    at NewClass.removeFrom (leaflet-src.js:6522)
    at NewClass.remove (leaflet-src.js:6511)
    at NewClass.remove (leaflet-src.js:3761)
    at eval (MapContainer.js:56)

Likely something that needs to be fixed in Leaflet.GridLayer.GoogleMutant.

aviklai commented 2 years ago

@simonnilsson can you post a codesandbox with this issue? I tried upgrading the example to react-leaflet 3.2.4 but it still works. Here is an example of mounting and unmounting the map every 3 seconds: https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-forked-bstxg

simonnilsson commented 2 years ago

Hi @aviklai, the root problem seems to be in the lifecycle of react-leaflet and not really related to this module. I'm guessing the error about google is just a red herring.

I was able to reproduce it here, you can see the above error briefly before it goes over to showing "Map container is being reused by another instance" which is probably the real problem. https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-forked-37q7d

Notice the use of whenCreated callback whenCreated={(mapRef) => setMap(mapRef)} that seems to cause the problem.

There is an issue open about it here: https://github.com/PaulLeCam/react-leaflet/issues/943