React Leaflet 配置报错：Unexpected Token 模块解析失败

云原生阿岚

2026-7-17

解决React Leaflet启动时的Module parse失败问题

我按照React Leaflet官方指南完成配置，但启动React项目时出现如下错误：

./node_modules/react-leaflet/lib/VideoOverlay.js 10:25
Module parse failed: Unexpected token (10:25)
You may need an appropriate loader to handle this file type.
|   var overlay = new LeafletVideoOverlay(url, bounds, options);
|   if (options.play === true) {
>     overlay.getElement()?.play();
|   }
|   return createElementObject(overlay, extendContext(ctx, {

我的React组件代码：

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

export default function SlideMape() {
    return (
        <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>
    );
}

package.json配置：

{
  "name": "slide-search-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.7.15",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.6.1",
    "graphql": "^16.6.0",
    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.1",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
   "not dead",
   "not op_mini all"
  ],
  "devDependencies": {
    "@types/leaflet": "^1.9.3"
  }
}

我已经调整过package.json里的browserslist，但问题仍未解决。

问题根源

错误中的?.是ES6+的可选链操作符，你使用的react-scripts@2.1.3版本过旧，默认的Babel配置不支持解析这种新语法，而且不会编译node_modules目录下的代码，导致React Leaflet的代码无法被正确转译。

解决方案

方案1：升级react-scripts到最新稳定版

这是最简单彻底的解决方式，新版本的Create React App已经支持所有主流ES6+语法，且默认配置更完善：

npm install react-scripts@latest
# 或使用yarn
yarn add react-scripts@latest

升级完成后重启项目，即可正常运行。

方案2：不升级react-scripts，手动配置Babel和Webpack

如果项目依赖限制无法升级，需要修改配置让Webpack编译React Leaflet的代码，并添加可选链支持：

安装必要依赖：

npm install @babel/plugin-proposal-optional-chaining react-app-rewired customize-cra --save-dev

修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

在项目根目录创建.babelrc文件：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

创建config-overrides.js文件，配置Webpack编译指定依赖：

const { override, addBabelPlugins, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  addBabelPlugins('@babel/plugin-proposal-optional-chaining'),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/react-leaflet'),
    path.resolve('node_modules/@react-leaflet/core')
  ])
);

完成后重启项目即可。

方案3：降级React Leaflet到兼容版本

如果不想修改配置，可以降级React Leaflet到不使用可选链的3.x版本，同时匹配对应的Leaflet版本：

npm install react-leaflet@3.2.5 leaflet@1.7.1

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