Next.js: render is not a function (Error)

[Rchn1907]

Bug report in v5

• All peer dependencies are installed: React, ReactDOM and Leaflet.
• Using the latest stable version of React and ReactDOM v19.
• Using the supported version of Leaflet (v1.9.0 minimum) and its corresponding CSS file is loaded.
• Using the latest v5 version of React-Leaflet.
• The issue has not already been reported.
• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I have a nextjs Project which is running server side.
I try to implement a leaflet map into my component.

Actual behavior

I have a page.js which is running SSR: I implemented my MapCaller in it, which looks like this:

"use client";

import dynamic from "next/dynamic";

const LazyMap = dynamic(() => import("@/app/_components/Map/Map"), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const MapCaller = () => {
  return (
    <div>
      <LazyMap />
    </div>
  );
}

export default MapCaller;

My Map Component looks like this:

"use client";
import React, { useState } from "react";
import { MapContainer, TileLayer, GeoJSON, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import L from "leaflet";

// GeoJSON sample data
const countriesData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        properties: { NAME: "Georgia", CONTINENT: "Asia" },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [44.97248, 41.248129],
              [43.582746, 41.092143],
              [42.619549, 41.583173],
              [44.97248, 41.248129],
            ],
          ],
        },
      },
    ],
  };
  
  const pointsData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [17.309889, 12.082583],
        },
        properties: {
          title: "Random Point",
        },
      },
    ],
  };
  
  const Map = ({initialData}) => {
    const [hoveredCountry, setHoveredCountry] = useState(null);
  
    const countryStyle = {
      fillColor: "green",
      color: "black",
      weight: 1,
      fillOpacity: 0.5,
    };
  
    const onEachCountry = (feature, layer) => {
      layer.on({
        mouseover: (e) => {
          setHoveredCountry(feature.properties);
          layer.setStyle({ fillColor: "blue", color: "blue" });
        },
        mouseout: () => {
          setHoveredCountry(null);
          layer.setStyle({ fillColor: "green", color: "black" });
        },
      });
    };
  
    return (
      <div style={{ position: "relative" }}>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={2}
          scrollWheelZoom={false}
          style={{ height: "500px" }}
        >
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&copy; OpenStreetMap contributors"
          />
          <GeoJSON
            data={countriesData}
            style={countryStyle}
            onEachFeature={onEachCountry}
          />
          {pointsData.features.map((point, index) => (
            <Marker
              key={index}
              position={[
                point.geometry.coordinates[1], // Latitude
                point.geometry.coordinates[0], // Longitude
              ]}
            >
              <Popup>{point.properties.title}</Popup>
            </Marker>
          ))}
        </MapContainer>
  
        {hoveredCountry && (
          <div
            style={{
              position: "absolute",
              top: 10,
              left: 10,
              background: "white",
              padding: 10,
              zIndex: 1000,
            }}
          >
            <strong>{hoveredCountry.NAME}</strong>
            <p>Continent: {hoveredCountry.CONTINENT}</p>
          </div>
        )}
      </div>
    );
  };

  export default Map;

But now i am getting this error:

I hope somebody can help me with my problem

[6TELOIV]

You checked "Using the latest stable version of React and ReactDOM v19" but that error says Next.js 14.2.8, which uses react 18 (feel free to correct me if this is wrong).

react-leaflet 5.0.0 is only compatible with react 19. If you are usin react 18, you should probably downgrade react-leaflet to 4.x.x or upgrade your Next.js project to 15.x.x and react 19.x.x