Why I am getting 'Map' is not exported from 'react-leaflet'? - reactjs

Question

Why I am getting:
./src/components/mapComponent/MapView.jsx
Attempted import error: 'Map' is not exported from 'react-leaflet'.
I am importing this in the component:
import React, { Component } from "react";
import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
This is confusing me where to look as all looks to be correct in code....

Answer 1

Try with MapContainer component.
The MapContainer component is responsible for creating the Leaflet Map
instance and providing it to its child components, using a React
Context.
When creating a MapContainer element, its props are used as options to
create the Map instance.
Now you have to import MapContainer.
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
<MapContainer
className="markercluster-map"
center={[51.0, 19.0]}
zoom={4}
maxZoom={18}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
</MapContainer>

Answer 2

Change Map to MapContainer.
import { MapContainer, TileLayer } from "react-leaflet";

Answer 3

This problem is occurring in the older version try using "react-leaflet": "^3.2.1", "leaflet": "^1.7.1", and it would resolve, if you are using react 17 and upper .
https://codesandbox.io/s/cluster-mapping-leaflet-9bkes
import { TileLayer, Tooltip, Marker, MapContainer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import MarkerClusterGroup from "react-leaflet-markercluster";
import { customMarker } from "./constants";
import L from "leaflet";
const Cluster = () => {
let data = {
minLat: -6.1751,
maxLat: 55.7558,
minLong: 37.6173,
maxLong: 139.6917
};
const centerLat = (data.minLat + data.maxLat) / 2;
var distanceLat = data.maxLat - data.minLat;
var bufferLat = distanceLat * 0.05;
const centerLong = (data.minLong + data.maxLong) / 2;
var distanceLong = data.maxLong - data.minLong;
var bufferLong = distanceLong * 0.05;
const zoom = 4;
const cities = [
{ position: [22.583261, 88.412796], text: "A" },
{ position: [22.58289, 88.41366], text: "B" }
];
return (
<MapContainer
style={{ height: "480px", width: "100%" }}
zoom={zoom}
center={[centerLat, centerLong]}
bounds={[
[data.minLat - bufferLat, data.minLong - bufferLong],
[data.maxLat + bufferLat, data.maxLong + bufferLong]
]}
scrollWheelZoom={true}
>
<TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<MarkerClusterGroup>
{cities?.map((mark, i) => (
<Marker
style={{ color: "red" }}
key={i}
position={mark?.position}
icon={customMarker}
>
<Tooltip direction="top" offset={[10, 0]}>
<span style={{ fontSize: 14, fontWeight: "bold" }}>
{mark?.text}
</span>
</Tooltip>
</Marker>
))}
</MarkerClusterGroup>
</MapContainer>
);
};
export default Cluster;
export const customMarker = new L.Icon({
iconUrl: "https://unpkg.com/leaflet#1.5.1/dist/images/marker-icon.png",
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40]
});

Answer 4

You should use import {MapContainer} from "react-leaflet" instead of Map and before doing that install both react-leaflet and leaflet by
$ npm i leaflet react-leaflet
Hope this solve your problem

Answer 5

This problem is occurring in the newer version try using "react-leaflet": "^2.8.0","leaflet": "^1.7.1"and it would resolve