NextJS: Cannot assign to read only property 'params' of object '#<Object>' #1164

Activity

1. Samue1Ace commented on Sep 18, 2025

   

   Samue1Ace

   on Sep 18, 2025

   Last edited by Samue1Ace

   More actions

   I had the same issue and I was able to fix:
   This is due to leaflet using browser APIs like window before they are available, even with the use client. So you need to dynamically import the map container, with ssr set to false.

   See my code below on how to dynamically import the MapContainer.

   'use client';
   import dynamic from 'next/dynamic';
   import { useState } from 'react';
   import { LatLngExpression } from 'leaflet';
   
   const MapComponent = dynamic(() => import('./components/MapComponent'), {
     ssr: false,
   });
   
   export default function MapPage() {
     const [center, setCenter] = useState<{ lat: number; lng: number }>({
       lat: 39.76264,
       lng: -104.87653,
     });
     const [zoom, setZoom] = useState(11);
   
     return (
       <div>
         <MapComponent center={center} zoom={zoom} />
       </div>
     );
   }

   and my component

   import "leaflet/dist/leaflet.css";
   import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
   import { TileLayer, useMap } from "react-leaflet";
   import { MapContainer } from "react-leaflet/MapContainer";
   import { LatLngExpression } from "leaflet";
   
   interface MapComponentProps {
     center: { lat: number; lng: number };
     zoom: number;
   }
   
   function ChangeCenter({
     center,
     zoom,
   }: {
     center: LatLngExpression;
     zoom: number;
   }) {
     const map = useMap();
     map.setView(center, zoom);
     return null;
   }
   
   export default function MapComponent({ center, zoom }: MapComponentProps) {
     return (
       <MapContainer
         style={{ height: "50vh", width: "80%", zIndex: "1" }}
         center={center}
         zoom={zoom}
       >
         <TileLayer
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <ChangeCenter center={center} zoom={zoom} />
       </MapContainer>
     );
   }

   the run build and try again.

   Hope this helps.

   Solved the issue on

    "next": "^15.5.3",
   "react": "^19.1.1",
   "react-leaflet": "^5.0.0",