Search code examples
reactjsreact-leaflet

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

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....

Solution

  • 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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
</MapContainer>