Problems with react-leaflet in Next.js 15

Question

I have a Next.js 14 app with react-leaflet that works fine. I wanted to update it to Next.js 15 but that caused some issues: In development mode the code return an unhandled runtime error "Error: Map container is already initialized." I guess this error is somehow related to double rendering in development mode but don't understand why it did not happenin [email protected]. I guess I can live with it because this works fine when I create a build and run it from there. But I am nevertheless curious about why this is happening.

The page.tsx code is as follows:

const Map = dynamic(() => import('./_components/map'), {
  loading: () => <p>The map is loading</p>,
  ssr: false,
});

The index.ts file in the _components/map folder does not incude a useEffect function and I have tried, wihtout success if I could somehow use useEffect to remove older instances of the Map container and initialize a new one only if there is none already initialized.

Answer 1

I encountered the same issue. Fixed by setting { reactStrictMode: false } in next.config This a temporary workaround until it get fixed.