无法从react-leaflet-draw导入EditControl

Question

版本: leaftlet - 1.3.4

react-leaflet 2.0.1

宣传单-绘图- 1.0.4

react-leaflet-draw -0.19.8

代码：

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>
    );
  }
}

错误：

找不到与'/node_modules/react-leaflet-draw/dist/esm/EditControl.js‘相关的依赖项：“@react-leaflet/core”

我尝试升级到react-leaflet的3.x版本，但同样的错误。

Answer 1

深入研究react-leaflet-draw repo有点令人困惑。自述文件显示了import { Map } from 'react-leaflet'的示例，但package.json显示了react-leaflet v3的依赖项，该依赖项不导入Map，而是导入MapContainer。该代码库中的源代码和示例确实显示了import { MapContainer } from 'react-leaflet'。

您可能想尝试一个简单的npm install @react-leaflet/core，并确保您使用的是react-leaflet版本3，并且导入的是MapContainer，而不是Map。