couldn't import EditControl from react-leaflet-draw

Question

Versions: leaftlet - 1.3.4

react-leaflet - 2.0.1

leaflet-draw - 1.0.4

react-leaflet-draw -0.19.8

Code:

import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import { EditControl } from "react-leaflet-draw";

import "./styles.css";

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

Error:

Could not find dependency: '@react-leaflet/core' relative to '/node_modules/react-leaflet-draw/dist/esm/EditControl.js'

I tried upgrading to 3.x for react-leaflet but same error.

Answer 1

Digging into the react-leaflet-draw repo is kind of confusing. The README shows an example of import { Map } from 'react-leaflet', but the package.json shows a dependency of react-leaflet v3, which does not import Map, but rather MapContainer. The source code and the example in that repo indeed show import { MapContainer } from 'react-leaflet'.

You may want to try a simple npm install @react-leaflet/core, and make sure you're using react-leaflet version 3, and importing MapContainer, not Map.