无法解析“react-leaflet”

Question

我遇到一个问题，无法安装react-leaflet，我尝试了所有使用react 18的方法，并安装了leaflet 4.2。当我开始我的反应项目时，它找不到我的反应传单，问题标题中出现错误：

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet'; // Importation du TileLayer pour afficher les tuiles
import 'leaflet/dist/leaflet.css';

function Tournee() {
  return (
    <MapContainer
      center={[51.505, -0.09]} // Coordonnées de la carte (latitude, longitude)
      zoom={13} // Niveau de zoom initial
      style={{ height: "100vh", width: "100%" }} // Style pour que la carte occupe toute la fenêtre
    >
      {/* TileLayer pour les tuiles de la carte */}
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" // URL des tuiles
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
}

export default Tournee;

我尝试了很多在谷歌上搜索的东西来降级我的反应等

Answer 1

您只安装传单：

npm install leaflet

同时安装react-leaflet：

npm install react-leaflet

然后修复您的导入：

import { MapContainer, TileLayer } from 'react-leaflet';