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

[GeorgSteyn]

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

[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 👍

[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.

[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