为什么即使使用动态导入，我也不能在 Nextjs 上使用 Leaflet Map？

Question

Leaflet need global window object and as you know on SSR there is no window and it will return an error window is not definded

I searched a lot and the only way to use Leaflet it was to use nextjs dynamic import but i get nothing In my Page

It's been a day I'm searching the web how to solve this and NOTHING worked so far for me.

I Really need an answer for this

Why Map component won't Render?

Map.tsx

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 = () => {
  const [position, setPosition] = useState<[number, number]>([51.505, 51.505]);

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

  return (
    <MapContainer
      center={[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;

my dynamic import

import dynamic from "next/dynamic";
const AdPage = ({ ad }: AdPageProps): JSX.Element => {

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

  return (
    <>
            <MapWithNoSSR />
    </>
  );
};

export default AdPage;

Answer 1

try to move MapWithNoSSR out of AdPage function

import dynamic from "next/dynamic";

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

const AdPage = ({ ad }: AdPageProps): JSX.Element => {
  return (
    <>
            <MapWithNoSSR />
    </>
  );
};

export default AdPage;