How how to add react-leaflet to a next-js app who is working with app routing

[nelsonmandeladev]

Hi there, I'm trying without success to add react-leaflet to my next js 13.4.9 app with app routing and I'm getting this error :

This is the component

[tdvuanh]

you should use dynamic import

[ivanaposdev]

I have encountered this with NextJS before.

You can use dynamic import which @tdvuanh mentioned
Refer to this documentation for more info: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

It should be something like this:

'use client';
import dynamic from 'next/dynamic';

export const DynamicTestMap = dynamic(() => import('../components/TestMap'), {
  ssr: false,
});

export default DynamicTestMap ;

[ttsoares]

Yet, I'm having this error in the browser:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

But the map is there...

And the marker is not present, just a squared frame :-(

[ffrosch]

The hydration error is most likely caused by not deleting the normal import statement for the map.

So you probably have this:

'use client';
import dynamic from 'next/dynamic';
import TestMap from '../components/TestMap' // <-- DELETE this

export const DynamicTestMap = dynamic(() => import('../components/TestMap'), {
  ssr: false,
});

Instead of this:

'use client';
import dynamic from 'next/dynamic';

export const DynamicTestMap = dynamic(() => import('../components/TestMap'), {
  ssr: false,
});

The missing marker is a known issue when using leaflet with bundlers. There is an npm package that solves this problem: leaflet-defaulticon-compatibility.

Feel free to have a look at my stackoverflow post on how to setup react-leaflet 4 with nextjs 14.