El folleto necesita un objeto de ventana global y, como sabe, en SSR no hay window y devolverá una window is not definded

Busqué mucho y la única forma de usar Leaflet era usar la importación dynamic nextjs pero no obtengo nada en mi página

Llevo un día buscando en la web cómo solucionar esto y hasta ahora NADA me ha funcionado.

Realmente necesito una respuesta para esto

¿Por qué el componente Mapa no se renderiza?

Mapa.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;

mi importación dinámica

 import dynamic from "next/dynamic"; const AdPage = ({ ad }: AdPageProps): JSX.Element => { const MapWithNoSSR = dynamic(() => import("./NewAd/map"), { ssr: false, }); return ( <> <MapWithNoSSR /> </> ); }; export default AdPage;