React 19 Old Error Back: Uncaught Error: Map container is already initialized.

[GeorgSteyn]

Bug report in v4

• All peer dependencies are installed: React, ReactDOM and Leaflet.
• Using the latest version of React and ReactDOM v18.
• Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• Using the latest v4 version of React-Leaflet.
• The issue has not already been reported.
• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Working

Actual behavior

Well upgraded project to React 19 RC and the error popped up. Same as the past with ReactJs Upgrades
Not working getting error: Uncaught Error: Map container is already initialized.

Steps to reproduce

Upgrade project to React 19

[cedric-marcone]

I tried to upgrade a big app from react 18.3.0 to latest react 19 rc (19.0.0-rc-915b914b3a-20240515) and I'm facing the same issue.

Here is the simplest repro : https://codesandbox.io/p/sandbox/thirsty-zeh-34ddlm

Thanks for your help.

[kevinbioj]

The issue seems to go away by disabling Strict Mode.
Even tho this is not a viable solution, it's a way to get it working until it gets fixed 👍

[bovan]

workaround:

  const isInitialized = useRef(false);
  useEffect(() => {
    isInitialized.current = true;
    return () => {
      isInitialized.current = false;
    };
  }, []);
  if (!isInitialized) return null;

[icodeforlove]

The issue seems to go away by disabling Strict Mode. Even tho this is not a viable solution, it's a way to get it working until it gets fixed 👍

I encountered the same issue while testing this in the Next.js v15 RC.

The Map container fails to mount, even with dynamic loading.

A temporary workaround as you mentioned is to disable reactStrictMode for the entire app by setting { reactStrictMode: false } in next.config.

Hopefully, we can find a proper solution soon.

__

Not sure what is causing the component to initialize twice, I may need to break out of react-leaflet.

https://github.com/Leaflet/Leaflet/blob/ed5778c319a0b5466e6f52b49004539ff8fff774/src/map/Map.js#L1094