search

yuzhva / react-leaflet-markercluster

React wrapper of the official Leaflet.markercluster for react-leaflet
https://yuzhva.github.io/react-leaflet-markercluster/
MIT License
285 stars 99 forks source link

Error: L is not defined in nextjs #185

Closed iaminamcom closed 2 years ago

iaminamcom commented 2 years ago

Hi I am working with NextJS and seeing error: ReferenceError: L is not defined Screenshot image

I'm following this guide https://github.com/colbyfayock/next-leaflet-starter Can you please tell how to solve this problem?

iaminamcom commented 2 years ago

I solved it. It's not big issue 

import Map from "../components/Map";
import MarkerClusterGroup from "react-leaflet-markercluster";
import "react-leaflet-markercluster/dist/styles.min.css";

export default function Home() {
  return (
    <div>
      <main style={{ width: "100%" }}>
        <Map
          style={{ width: "100%", height: "40rem" }}
          center={[38.907132, -77.036546]}
          zoom={12}
        >
          {({ Marker }) => (
            <MarkerClusterGroup>
              <Marker position={[49.8397, 24.0297]} />
              <Marker position={[52.2297, 21.0122]} />
              <Marker position={[52.2297, 21.0122]} />
            </MarkerClusterGroup>
          )}
        </Map>
      </main>
    </div>
  );
}