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

[Nedi11]

I am having this issue aswell

[whollacsek]

Hello do we have a solution soon for this issue? Next.js 15 just released so I'd assume more people will run into this as well

[mamlzy]

Hello do we have a solution soon for this issue? Next.js 15 just released so I'd assume more people will run into this as well

sorry for tagging you @PaulLeCam

[valentingavran]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

[mamlzy]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

yes, it is working fine on rc tag, thanks

[SuMayaBee]

Thanks you so much

[erbilozum]

I am having this issue

[homebooksalexalmu]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

I am in the same case, but it does not work for me.

I start the leaflet configuration with react-leaflet in local development and everything works, but when I do a yarn build it fails because window is not defined. When I fix this error I get the error “Error: Map container is already initialized.” and from here I can not pass.

[zeyadAjamy]

I faced the same issue, but it was fixed after clearing the cache. Try deleting the .next dir

[homebooksalexalmu]

I faced the same issue, but it was fixed after clearing the cache. Try deleting the .next dir

I just tried it, but unfortunately it is still the same. I get the “Map container is already initialized.” error.

[valentingavran]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

I would also recommend deactivating the SSR for the map. Perhaps some of you have not yet done this and it may solve the Map container is already initialized problem

import dynamic from 'next/dynamic';
const LazyMap = dynamic(() => import('./maps/map').then((mod) => mod.Map), { ssr: false });

[sebastianovide]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

I would also recommend deactivating the SSR for the map. Perhaps some of you have not yet done this and it may solve the Map container is already initialized problem

import dynamic from 'next/dynamic';
const LazyMap = dynamic(() => import('./maps/map').then((mod) => mod.Map), { ssr: false });

My is dissabled.. I'll try with the rc1 version

[homebooksalexalmu]

I was already using next/dynamic before. I have been changing versions and creating a new Next.js App Router project.

I have managed to get it working both running yarn dev and yarn build with these dependencies:

“dependencies": {
    “react": ‘19.0.0-rc-69d4b800-20241021’,
    “react-dom": ‘19.0.0-rc-69d4b800-20241021’,
    “next": ‘15.0.1’,
    “leaflet": ‘^1.9.4’,
    “leaflet-defaulticon-compatibility": ‘^0.1.2’,
    “react-leaflet": ‘v5.0.0-rc.1’.
  },

[muhaimincs]

Hello do we have a solution soon for this issue? Next.js 15 just released so I'd assume more people will run into this as well

yeah

I was already using next/dynamic before. I have been changing versions and creating a new Next.js App Router project.

I have managed to get it working both running yarn dev and yarn build with these dependencies:

“dependencies": {
    “react": ‘19.0.0-rc-69d4b800-20241021’,
    “react-dom": ‘19.0.0-rc-69d4b800-20241021’,
    “next": ‘15.0.1’,
    “leaflet": ‘^1.9.4’,
    “leaflet-defaulticon-compatibility": ‘^0.1.2’,
    “react-leaflet": ‘v5.0.0-rc.1’.
  },

This temporarily work for me

[AtheerAPeter]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

Solved my issue, thanks.

[pekmah]

Hello do we have a solution soon for this issue? Next.js 15 just released so I'd assume more people will run into this as well

yeah

I was already using next/dynamic before. I have been changing versions and creating a new Next.js App Router project.
I have managed to get it working both running yarn dev and yarn build with these dependencies:

“dependencies": {
    “react": ‘19.0.0-rc-69d4b800-20241021’,
    “react-dom": ‘19.0.0-rc-69d4b800-20241021’,
    “next": ‘15.0.1’,
    “leaflet": ‘^1.9.4’,
    “leaflet-defaulticon-compatibility": ‘^0.1.2’,
    “react-leaflet": ‘v5.0.0-rc.1’.
  },

This temporarily work for me

This worked, Thanks

[biojazzard]

Same here, went from React 18/Next 14 to React 18/Next 15, and this thing started to pop up.
I'll try this React 19.0.0-rc, also... Thanks in advance.

[yadhukrishnasm]

w

it's giving me peer dependency warning and errors with this

[chuang091]

“react-leaflet": ‘v5.0.0-rc.1’.

works for me!

[ownerofglory]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

Release candidate version of react-leaflet worked for me. Thanks

[lemmski]

I'm using Next.js 15 with react-leaflet v5.0.0-rc.1, and I haven't encountered any issues with it. Have you tried this release candidate version?

This works with Next.js 15.0.3, thank you!

[Akhsanfr]

Updating to react-leaflet version ^5.0.0 works for me now.

[kotesh-arya]

react-leaflet": ‘v5.0.0-rc.1’.

This worked, thanks <3