无法从 react-leaflet-draw 导入 EditControl

Question

版本： 传单 - 1.3.4

反应传单 - 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>
    );
  }
}

错误：

找不到依赖关系：'@react-leaflet/core' 相对于'/node_modules/react-leaflet-draw/dist/esm/EditControl.js'

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

Answer 1

深入研究 react-leaflet-draw repo 有点令人困惑。 README 显示了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。