How do I resolve these errors with React 17 and react-leaflet?

Question

I am in the process of upgrading my application to React 17 and using function based components. In the old version of React, everything was class based. The map in the old version used leaflet 1.7.1. However it is not rendering in the new version and is throwing a white screen.

Here's my code:

import React, { useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "./NewMap.css";

export default function NewMap() {
  const dispatch = useDispatch();
  const position = [35.831, -78.767];
  return (
    <div>
      <MapContainer
        center={position}
        zoom={13}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            Test.
            <br /> Lorem ipsum.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

I'm also getting the following console errors:

react.development.js?72d0:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

react-dom.development.js?61bb:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I ran npm i react-leaflet to get the latest version of React Leaflet (3.2.5) and it's still throwing these errors and showing me a white screen. Any ideas on how to fix this?

Answer 1

Try this

npm i react-router-dom@next

or

import {ReactDOM} from 'react-dom';

or this

import { BrowserRouter } from 'react-router-dom';