Fixes issue with Map Container is already initialized

[mistenkt]

Was running into this error quite frequently when using this library on a Next project where our maps were being loaded using next/dynamic to prevent SSR.

Previous suggestions about adding keys to the MapContainer component were not working.

Noticed that the code for checking if we have an existin context is not actually updated if/when the context changes, and instead explicitly ignoring the lint warnings for this. // eslint-disable-next-line react-hooks/exhaustive-deps.

This fixes the problem.

Related issue: #1069

[yuzhakovvv]

Any updates here? 👀

[natBizitza]

Hi, any update on this PR?😎

[mistenkt]

Until this is merged and a new release is created, you can use my branch by adding the following in your package.json

"react-leaflet": "https://github.com/mistenkt/react-leaflet/archive/refs/tags/react-leaflet-v4.2.1-gitpkg.tar.gz",

we've been using it in prod for a few months now without any issues.

[natBizitza]

Until this is merged and a new release is created, you can use my branch by adding the following in your package.json

"react-leaflet": "https://github.com/mistenkt/react-leaflet/archive/refs/tags/react-leaflet-v4.2.1-gitpkg.tar.gz",

we've been using it in prod for a few months now without any issues.

Thank you! It works very well for me!

[lemilonkh]

We are also facing this issue, which is breaking hot reloads on our pages that have maps on them.
@PaulLeCam can this PR be merged and a new release be created? Thanks!

[tswacast]

This fixed the issue for us as well. If we can do anything to help get this PR merged into the new release, let us know. Much appreciated.

[stephanmantler]

This change didn't fix the issue for me, but another small tweak did. Although I am pretty sure it is a crude symptomatic solution and not a proper fix, thus no PR. But I basically just ensured _leaflet_id was undefined before calling the constructor:

// MapContainer.js 
28   const mapRef = useCallback((node)=>{
29      if (node !== null && context === null) {
30           // --- ensure LeafletMap does not get confused by id set in a previous render
31           node._leaflet_id = null;
32           const map = new LeafletMap(node, options);

(Next.js 15.0.2, React 18.3.1)