React集成Leaflet地图编译报错，求解决方案

云上老周

2026-6-18

React + Leaflet 编译错误修复方案

问题概述

在React项目中集成Leaflet地图时，编译出现TypeScript语法错误，尝试更换react-leaflet版本未解决。

组件代码

import React from "react";
import {MapContainer, TileLayer, Marker, Popup} from "react-leaflet";

const AnalyticsMap = ({position}) => {
    return (
        <MapContainer center={position} zoom={13} scrollWheelZoom={true}>
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
            <Marker position={position}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker>
        </MapContainer>
    );
};

export default AnalyticsMap;

编译错误信息

YOUR TYPESCRIPT VERSION: 4.4.4

Please only submit bug reports when using the officially supported version.

=============
Failed to compile.

C:/wamp64/www/insurance_site/node_modules/@react-leaflet/core/lib/component.d.ts
TypeScript error in C:/wamp64/www/insurance_site/node_modules/@react-leaflet/core/lib/component.d.ts(1,22):
',' expected.  TS1005

  > 1 | import React, { type MutableRefObject, type ReactNode } from 'react';
      |                      ^
    2 | import type { DivOverlay, DivOverlayHook } from './div-overlay.js';
    3 | import type { LeafletElement } from './element.js';
    4 | declare type ElementHook<E, P> = (props: P) => MutableRefObject<LeafletElement<E>>;


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

项目package.json配置

{
  "name": "my-web-site",
  "version": "1.2.8",
  "private": true,
  "dependencies": {
    "@kunukn/react-collapse": "^2.2.7",
    "@react-leaflet/core": "^2.1.0",
    "@rehooks/window-scroll-position": "^1.0.1",
    "@types/dotenv": "=6.1.1",
    "@types/express": "^4.17.1",
    "@types/js-base64": "=2.3.1",
    "@types/leaflet": "^1.9.12",
    "@types/lodash": "=4.14.149",
    "@types/morgan": "=1.7.37",
    "@types/multer": "^1.4.11",
    "@types/node": "^22.4.0",
    "@types/node-cron": "^3.0.11",
    "@types/node-fetch": "=2.5.0",
    "@types/node-sass": "=4.11.0",
    "@types/nodemailer": "^6.4.15",
    "@types/rc-steps": "^4.0.0",
    "@types/react": "^17.0.2",
    "@types/react-autosuggest": "^9.3.13",
    "@types/react-dom": "16.8.5",
    "@types/react-fontawesome": "=1.6.1",
    "@types/react-helmet": "=5.0.3",
    "@types/react-input-mask": "^2.0.4",
    "@types/react-leaflet": "^3.0.0",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-config": "=5.0.0",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-select": "=3.0.2",
    "@types/to-boolean": "^1.0.2",
    "@types/uuid": "^3.4.6",
    "@types/whatwg-fetch": "^0.0.33",
    "app-root-path": "^2.0.1",
    "axios": "^1.7.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.12.1",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.3.1",
    "caniuse-lite": "^1.0.30001576",
    "cors": "^2.8.5",
    "credit-card-type": "^10.0.0",
    "cross-env": "^5.1.3",
    "crypto": "^1.0.1",
    "crypto-js": "^4.1.1",
    "customize-cra": "^0.6.0",
    "dotenv": "^8.1.0",
    "dotenv-webpack": "^1.7.0",
    "es6-promise": "^4.2.2",
    "express": "^4.17.1",
    "fetch-everywhere": "^1.0.5",
    "file-loader": "^3.0.1",
    "form-data": "^4.0.0",
    "ignore-loader": "^0.1.2",
    "ignore-styles": "^5.0.1",
    "image-size": "^1.1.1",
    "js-base64": "^2.4.3",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.4",
    "lodash.throttle": "^4.1.1",
    "moment": "^2.30.1",
    "morgan": "^1.9.1",
    "multer": "^1.4.5-lts.1",
    "mysql": "^2.18.1",
    "node-cron": "^3.0.3",
    "node-fetch": "^2.6.0",
    "node-sass": "^4.12.0",
    "nodemailer": "^6.9.13",
    "odata-query": "6.0.0-1",
    "qrcode.react": "^3.1.0",
    "rc-steps": "^3.5.0",
    "re-reselect": "^3.4.0",
    "react": "^17.0.2",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.3",
    "react-autosuggest": "^10.0.2",
    "react-bootstrap": "^1.0.0-beta.15",
    "react-countdown": "^2.3.5",
    "react-detect-click-outside": "^1.1.7",
    "react-dev-utils": "^12.0.1",
    "react-device-detect": "^2.2.3",
    "react-dom": "^17.0.2",
    "react-dropdown-date": "^2.2.7",
    "react-ga": "^2.6.0",
    "react-helmet": "^5.2.0",
    "react-hook-form": "^3.28.2",
    "react-hotjar": "^2.0.2",
    "react-id-generator": "^3.0.0",
    "react-input-autosize": "^3.0.0",
    "react-input-mask": "^2.0.4",
    "react-leaflet": "^4.2.1",
    "react-lines-ellipsis": "^0.14.1",
    "react-modal": "^3.11.1",
    "react-modern-calendar-datepicker": "^3.1.6",
    "react-moment": "^1.1.3",
    "react-owl-carousel2": "^0.3.0",
    "react-redux": "7.1.3",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.3.4",
    "react-scripts": "3.0.1",
    "react-scripts-ts": "2.13.0",
    "react-select": "=3.0.8",
    "react-spinners": "=0.7.1",
    "react-switch": "^7.0.0",
    "react-tippy": "^1.4.0",
    "react-use-platform": "^1.1.0",
    "redux": "=4.0.4",
    "redux-actions": "=2.6.5",
    "redux-thunk": "=2.3.0",
    "reselect": "=4.0.0",
    "serve-favicon": "=2.4.5",
    "to-boolean": "^1.0.0",
    "ts-loader": "=6.0.4",
    "ts-node": "=8.3.0",
    "use-media": "=1.4.0",
    "use-react-router": "=1.0.7",
    "uuid": "=3.3.3",
    "voucher-code-generator": "^1.3.0",
    "webpack-cli": "=3.3.8",
    "webpack-node-externals": "=1.7.2",
    "whatwg-fetch": "=3.0.0",
    "winston": "^3.14.2"
  },
  "scripts": {
    "prestart": "yarn run build",
    "start": "yarn start:server",
    "start:dev": "yarn run build && yarn start:server:dev",
    "start:server": "cross-env NODE_ENV=production ts-node build_server/server.js",
    "start:server:dev": "cross-env NODE_ENV=development nodemon --ext js,mjs,cjs,json,tsx,jsx -r ts-node/register build_server/server.js",
    "start:client": "react-app-rewired start",
    "build:server": "ts-node node_modules/webpack/bin/webpack.js --config webpack.server.config.js",
    "build:client": "react-app-rewired build",
    "build": "yarn run build:client && yarn run build:server",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "=3.5.1",
    "nodemon": "^3.1.0",
    "style-loader": "=1.0.0",
    "typescript": "^4.4.4"
  }
}

错误原因及修复方案

原因分析

错误出现在@react-leaflet/core的类型文件中，import { type MutableRefObject }这种语法是TypeScript 4.5+才支持的类型导入语法，而项目使用的TypeScript版本是4.4.4，无法识别该语法，导致编译失败。

修复方案

方案1：升级TypeScript版本

将TypeScript升级到4.5或更高版本，适配@react-leaflet/core的语法要求：

yarn add typescript@^4.5.0 --dev

或使用npm：

npm install typescript@^4.5.0 --save-dev

方案2：降级react-leaflet到兼容TS4.4的版本

如果无法升级TypeScript，可使用react-leaflet 3.x版本，该版本依赖的@react-leaflet/core不使用TS4.5+的类型语法：

卸载当前版本：

yarn remove react-leaflet @react-leaflet/core @types/react-leaflet

安装兼容版本：

yarn add react-leaflet@^3.2.5 @types/react-leaflet@^3.0.0

此时@react-leaflet/core会自动安装兼容的1.x版本，无需单独指定。

额外注意事项

确保leaflet依赖已安装（react-leaflet会自动关联，若缺失可手动安装：yarn add leaflet）
项目中需引入Leaflet的CSS文件，可在入口文件或组件中添加：

import 'leaflet/dist/leaflet.css';

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

React集成Leaflet地图编译报错，求解决方案

问题概述 #

组件代码 #

编译错误信息 #

项目package.json配置 #

错误原因及修复方案 #

原因分析 #

修复方案 #