Error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap')

Question

Here is my code:

import { Map as LeafletMap, TileLayer } from 'react-leaflet';

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

But I got an error saying Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). I've tried changing the 'import { Map' to 'import { MapContainer' but still won't work. Instead I got another error saying:

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

I also tried changing the react-leaflet version from ^3.2.1 to ^2.7.0 and leaflet from ^1.7.1 to ^1.6.0. But still no luck. Any solutions?

Answer 1

You'll have to explicitly transpile react-leaflet because the maintainer is not understanding they should change their transpilation target to a lower version in order to more fully support the nullish coalescing operator: https://github.com/PaulLeCam/react-leaflet/issues/877#issuecomment-841871904

You can try adding this to your babel config

{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

And then make sure you transpile node_modules/react-leaflet during your build. If you are already using @babel/preset-env then you only need to make sure you're transpiling react-leaflet during the build. If you're using webpack you can do something like

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: filename => {
        return /node_modules/.test(filename) && !/react-leaflet/.test(filename)
      },
      use: ['babel-loader']
    }
  ]
}