How to use react-leaflet on Nextjs?

Question

Ok guys I'm trying to use Leaflet map on Nextjs but I get a window is not defined error

I saw a few posts about this issue on stackoverflow but none of them solved my problem.

Map component

import { useState } from "react";
import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";

const Map = ({ lat, lng }) => {
  const [position, setPosition] = useState<[number, number]>([51.505, 51.505]);
  function Mark() {
    const map = useMapEvents({
      click: ({ latlng }) => {
        setPosition([latlng.lat, latlng.lng]);
      },
    });
    return <Marker position={position} />;
  }

  return (
    <MapContainer
      center={[lat, lng] || [35.7219, 51.3347]}
      zoom={6}
      scrollWheelZoom={false}
      style={{ height: "50vh" }}
    >
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Mark />
    </MapContainer>
  );
};

export default Map;

i tried dynamic import like this

import dynamic from 'next/dynamic';
   const MapWithNoSSR = dynamic(() => import("./NewAd/map"), {
     ssr: false,
   });

return ( 
<MapWithNoSSR />
)

But in the page there is no map just a long text like this

Loading chunk components_common_Advertisement_NewAd_map_tsx failed.
 (error: http://localhost:3000/_next/static/chunks/components_common_Advertisement_NewAd_map_tsx.js)

ChunkLoadError: Loading chunk components_common_Advertisement_NewAd_map_tsx failed.
 (error: http://localhost:3000/_next/static/chunks/components_common_Advertisement_NewAd_map_tsx.js) at __webpack_require__.f.j 

(http://localhost:3000/_next/static/webpack/webpack.a371ef0decf43380.hot-update.js:67:28) at http://localhost:3000/_next/static/webpack/webpack.a371ef0decf43380.hot-update.js:19:39 at 

Array.reduce (<anonymous>) at __webpack_require__.e (http://localhost:3000/_next/static/webpack/webpack.a371ef0decf43380.hot-update.js:18:66) at fn.e
 (http://localhost:3000/_next/static/chunks/webpack.js?ts=1661762352962:336:50) at 

AdPage.next_dynamic__WEBPACK_IMPORTED_MODULE_3___default.loadableGenerated.modules (webpack-internal:///./components/common/Advertisement/adPage.tsx:45:36) at LoadableSubscription.load [as _loadFn] (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:34:19) at LoadableSubscription.retry (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:200:34) at new LoadableSubscription
 (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:186:14) at init (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:57:23) at useLoadableModule (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:69:9) at LoadableImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:79:9) at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16305:18) at updateForwardRef (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19221:20) at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21631:16) at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27421:14) at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26552:12) at workLoopConcurrent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26538:5) at renderRootConcurrent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26500:7) at performConcurrentWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25733:38) at workLoop (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:266:34) at flushWork (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:239:14) at MessagePort.performWorkUntilDeadline (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:533:21)

I will appreciate some help

Answer 1

Webpack is throwing up because you're trying to import css files inside a client side loaded react component.

You need to remove these lines from your component:

import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";

Those can go into the next page that you're using to hold the map, or into your _app file if you want to use them globally. Next is configured to do the right thing with CSS imports serverside, but doesn't have client side CSS loaders configured by default.