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

GeorgSteyn commented 6 months ago

Bug report in v4

[X] All peer dependencies are installed: React, ReactDOM and Leaflet.
[ ] Using the latest version of React and ReactDOM v18.
[X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
[X] Using the latest v4 version of React-Leaflet.
[X] The issue has not already been reported.
[X] Make sure you have followed the quick start guide for Leaflet.
[X] 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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

workaround:

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

icodeforlove commented 5 months ago

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 commented 3 months ago

I am having this issue aswell

whollacsek commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

Thanks you so much

erbilozum commented 1 month ago

I am having this issue

homebooksalexalmu commented 1 month ago

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 commented 1 month ago

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

homebooksalexalmu commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 4 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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.