React中Leaflet组件报错求助：Marker与Popup未定义

问题原因 #

你在代码中使用了Marker和Popup组件，但没有从react-leaflet库中导入它们，导致ESLint和TypeScript无法识别这两个组件，从而抛出未定义的错误。

修改后的完整代码 #

import React from "react";
// 补充导入Marker和Popup组件
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "./App.css";

function App() {
  return (
    // 注意：Tailwind CSS中自定义像素高度需用方括号包裹，h-180px不是合法类名
    <div id="map" className="h-[180px]">
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

export default App;

额外提示 #

1. Tailwind CSS类名规范：自定义像素高度必须用方括号包裹（如h-[180px]），否则样式不会生效。
2. 确保依赖安装完整：若未安装相关依赖，执行以下命令补充：

npm install leaflet react-leaflet
npm install -D @types/leaflet # TypeScript类型声明依赖

内容的提问来源于stack exchange，提问作者poshan baral