How to resolve the react-leaflet export error?

Question

I wanted to render map in react js for my project. SO for it i installed react-leaflet using code npm i react-leaflet and also did npm i leaflet in terminal and entered some code for react leaflet. The code is given Below: This is My Map.JS file:

    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'
            />
          </LeafletMap>
        </div>
      );
    }

export default Map;

This is My App.js file:

import {
  Card,
  CardContent,
  FormControl,
  MenuItem,
  Select,
} from '@material-ui/core';
import { useEffect, useState } from 'react';
import InfoBox from './InfoBox';
import './App.css';
import Table from './Table';
import { sortData } from './utl';
import LineGraph from './LineGraph';
import MapContainer from './Map';
import "leaflet/dist/leaflet.css";

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState('worldwide');
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    fetch('https://disease.sh/v3/covid-19/all')
      .then((response) => response.json())
      .then((data) => {
        setCountryInfo(data);
      });
  }, []);

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch('https://disease.sh/v3/covid-19/countries')
        .then((response) => response.json())
        .then((data) => {
          const countries = data.map((country) => ({
            name: country.country,
            value: country.countryInfo.iso2,
          }));
          const sortedData = sortData(data);
          setTableData(sortedData);
          setCountries(countries);
        });
    };
    getCountriesData();
  }, []);

  const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);
    const url =
      countryCode === 'worldwide'
        ? 'https://disease.sh/v3/covid-19/all'
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
        // All of the Data... from the country response
        setCountryInfo(data);
      });
  };

  console.log('fnfun', countryInfo);

  return (
    <div className='app'>
      <div className='spp_left'>
        <div className='app_header'>
          <h1>COVID-19 TRACKER</h1>
          <FormControl className='app_dropdown'>
            <Select
              variant='outlined'
              value={country}
              onChange={onCountryChange}
            >
              <MenuItem value='worldwide'>Worldwide</MenuItem>
              {countries.map((country) => (
                <MenuItem value={country.value}>{country.name}</MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
        <div className='app_stats'>
          <InfoBox
            title='Coronavirus Cases'
            cases={countryInfo.todayCases}
            total={countryInfo.cases}
          />
          <InfoBox
            title='Recovered'
            cases={countryInfo.todayRecovered}
            total={countryInfo.recovered}
          />
          <InfoBox
            title='Deaths'
            cases={countryInfo.todayDeaths}
            total={countryInfo.deaths}
          />
        </div>
        <MapContainer />
      </div>
      <Card className='app_right'>
        <CardContent>
          <h3>Live Cases by Country</h3>
          <Table countries={tableData} />
          <h3>Worldwide New Cases</h3>
          <LineGraph />
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

but the problem is it shows error:

Failed to compile ./src/Map.js Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). 

This error occurred during the build time and cannot be dismissed.

Answer 1

Here are the steps to follow to solve your issue:

1. change your import to import { MapContainer as LeafletMap, TileLayer } from "react-leaflet"; due t oreact-leaflet api change fro mversion 2.x to 3.x.

2. Delete this line import { showDataOnMap } from './util'; on the map component