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

[hadyjsc]

I put react-leaflet on my NextJS project, i just write the simple code based on example in new component. And then show error Cannot assign to read only property 'params' of object '#<Object>' after i call the component . Actually the maps is rendered, but the issue is show in the debugging mode, can help me to check the issue is on react-leaflet package or leaflet.

// CoordinatePicker.tsx
'use client';

import React, { useState } from "react"
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from "react-leaflet"
import 'leaflet/dist/leaflet.css';

const LocationMarker: React.FC<{}> = ({ }) => {
    const [position, setPosition] = useState(null)
    
    const map = useMapEvents({
        click() {
            map.locate()
        },

        locationfound(e: any) {
            setPosition(e.latlng)
            map.flyTo(e.latlng, map.getZoom())
        },
    })

    return <>
        {position === null ? null : (
            <Marker position={position}>
                <Popup>You are here</Popup>
            </Marker>
        )}
    </>
}

const CoordinatePicker: React.FC<{}> = ({ }) => {
    return <>
            <MapContainer
                style={{ height: "250px" }} 
                center={{ lat: 51.505, lng: -0.09 }}
                zoom={13}
                scrollWheelZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <LocationMarker />
            </MapContainer>
    </>
}

export default CoordinatePicker;

console-dev.js:111  ⨯ TypeError: Cannot assign to read only property 'params' of object '#<Object>'
    at fulfillReference (app-page.runtime.dev.js:2:346413)
    at wakeChunk (app-page.runtime.dev.js:2:339320)
    at initializeModelChunk (app-page.runtime.dev.js:2:342719)
    at resolveModelChunk (app-page.runtime.dev.js:2:341915)
    at processFullStringRow (app-page.runtime.dev.js:2:376807)
    at app-page.runtime.dev.js:2:379228
    at processBinaryChunk (app-page.runtime.dev.js:2:379300)
    at progress (app-page.runtime.dev.js:2:380828)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processImmediate (node:internal/timers:454:9)
    at process.callbackTrampoline (node:internal/async_hooks:130:17)

installed package

next: ^15.4.6
leaflet: ^1.9.4
react-leaflet: ^5.0.0-rc.2
@types/leaflet: "^1.9.20"

[Samue1Ace]

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",