LeafletMap is showing error even after importing the leaflet package in react js

Question

I was working on a covid application which shows covid mortality rate during all the three waves, particularly for my country India, but here the issue is while I'm trying to use leaflet package, its showing an error

import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";

function Map({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries, casesType)}
      </LeafletMap>
    </div>
  );
}

export default Map;

this package name: Map.js

even I had run the cmd in the terminal which imports the leaflet: npm i react-leaflet, but it is still showing error, please help anyone

This is localhost error which it is showing

Answer 1

Problem is that you're trying to export function Map which has the same name as Map you assigned to LeafletMap, try to change your function name, for instance

import React from "react";
import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";
import { showDataOnMap } from "./util";

function NewMap({ countries, casesType, center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {showDataOnMap(countries, casesType)}
      </LeafletMap>
    </div>
  );
}

export default NewMap;