'MapControl' is not exported from 'react-leaflet' in react-leaflet V3.0.0

Question

Trying to implement react-lealfet-draw with react-leaflet version 3.0.0. it throws an error /node_modules/react-leaflet-draw/dist/esm/EditControl.js Attempted import error: 'MapControl' is not exported from 'react-leaflet'.

import "./styles/leaflet.css";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import "leaflet-draw";
import L from "leaflet";
import "leaflet-splitmap";

import {MapConatiner, TileLayer} from 'react-leaflet';
import {EditControl} from 'react-leaflet-draw';

is there any way to implement leaflet-draw features with react-leaflet V3.0.0 ?

Answer 1

There's a workaround you can do.
You can use react-leaflet version, eg. 3.2.5, and you can add on your package.json react-leaflet-draw v0.19.5, but if you let this in this way, it will have conflits. The solution is to add a "override" on the dependencies on react-leaflet-draw to use react-leaflet v^3.0.0 and ignore the v^2.0.0

"overrides": {
  "react-leaflet-draw": {
    "react-leaflet": "^3.0.0"
  }
}