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

Leaplet需要全局窗口对象，如您所知，在SSR上没有window，它将返回错误window is not definded

我搜索了很多，使用宣传单的唯一方法是使用nextjs dynamic导入，但在我的页面上什么也没有找到

这一天，我在网上搜索如何解决这个问题，但到目前为止，我还没有找到任何有用的方法.

我真的需要一个答案

为什么 map 组件无法渲染？

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;

我的动态导入

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

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

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

export default AdPage;