如何修复错误 "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

Question

我正在尝试创建一个 react-typescript 应用程序以及 leaflet。我使用了命令，

npm install leaflet react-leaflet @types/react @types/leaflet --save 安装依赖项。

但是当我启动应用程序时它说，

    ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

这是我的 package.json

{
  "name": "aq-monitor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.23",
    "@types/leaflet": "^1.7.0",
    "@types/node": "^12.20.13",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.5",
    "antd": "^4.15.5",
    "leaflet": "^1.7.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-leaflet": "^3.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4",
    "web-vitals": "^1.1.2"
  },
  "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": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7"
  }
}

这里是 map/index.tsx

import React from 'react';
import './styles.css';
import L, { LatLngExpression } from "leaflet";
import "leaflet/dist/leaflet.css";
import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';

const position : LatLngExpression = [59.91174337077401, 10.750425582038146];

export default function MapJar() {
    return (
        <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position}>
                <Popup>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>
            </Marker>
        </MapContainer>
    );
};

我多次尝试重新安装依赖项，但仍然没有用。

我知道这是一个简单的问题，也是我犯的一个错误，但是我无法解决这个错误。

欢迎任何意见。提前致谢。

Answer 1

我在使用最新版本的传单“^3.2.0”时遇到了同样的问题，但我通过降级到版本 2.7.0 解决了这个问题。你应该做什么：

删除node_modules
删除'package-lock.json'
将“package.json”中的 leaflet 和 react-leaflet 版本更改为：“react-leaflet”：“^2.7.0”和“leaflet”：“^1.6.0”，
运行“npm 安装”
2.7.0版本未定义MapContainer组件，请使用Map代替。
为组件添加一些样式（长度）以查看地图。

Answer 2

降级为“react-leaflet”：“2.7.0”。

Answer 3

这个问题最终似乎与 create-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"
    ]
},

到

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

然后停止服务器并重新运行它。

感谢 bkiac official create-react-app github issue

编辑

如果下载 this codesandbox，您可以重现错误和修复。当您打开它时，它可以工作，但如果您下载它并运行在本地，您可以使用 package.json 中的第一个 browserslist 选项看到错误。如果您停止服务器，请将 browserslist 选项替换为新的并重新运行应用程序，您可以看到它按预期工作。

Answer 4

添加

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"

在“package.json”

github

第二种方案：

如果您仍然遇到问题，可能来自 package.json 文件。检查它是否与以下文件相似：

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.15.6",
    "leaflet": "1.7.1",
    "leaflet.marker.slideto": "^0.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-leaflet": "3.0.2",
    "react-leaflet-drift-marker": "^3.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 5

我找到了修复它的方法。

修复步骤：-

打开您的 package.json 文件并按如下方式编辑您的浏览器列表。

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

至

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

完成此操作后，删除 node_modules/.cache 目录。

然后试试npm install

和npm start

Tadaaa!

参考文献：-

Answer 6

我在执行 npm 更新后遇到了这个问题。

安装了这些包： "react-leaflet": "^3.2.0"

并作为依赖项（在 .lock 中找到）： "@react-leaflet/core": "1.1.0",

强制 npm 使用这些版本，已为我修复：

"@react-leaflet/core": "1.0.2",

"react-leaflet": "3.1.0",

所以试试npm i react-leaflet@3.1.0 @react-leaflet/core@1.0.2

Answer 7

我遇到了同样的问题，但是这里计划的所有解决方案都没有说服我。所以我通过以下方式解决了它：

yarn add -D @babel/plugin-proposal-nullish-coalescing-operator

然后我将它添加到 babel.config.js

中的 babel 插件

module.exports = {
  presets: [
    // ... some presets here
  ],
  plugins: [
    // ... any plugins here
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
  env: {
    // ... your config
  },
}

由于库使用空值 (??) 运算符而出现问题，我应该将其添加到 webpack 中的 bable-loader 的排除列表中。

// webpack.common.js

module.exports = {
   // ... some config here
    module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // the @react-leaflet and react-leaflet libraries must be excluded.
        exclude: /node_modules\/(?!(@react-leaflet|react-leaflet)\/)/i,
        use: []
      }
    ],
   // ... more config here
   
}

Answer 8

我通过更改 browserslist 解决了这个问题，正如其他人所说的那样。我的 browserslist 现在看起来像这样：

"browserslist": [
  ">0.2%",
  "not dead",
  "not op_mini all"
]

然后我做了以下事情：

删除您的 node_modules 文件夹
运行 npm cache clean --force
运行 npm install

现在一切都应该按预期工作。如果地图未加载，请不要忘记将传单 css 和 js 添加到您的页面并设置地图容器的高度。有关详细信息，请参阅 official documentation。

Answer 9

我在使用 3.2.0 版的 react-leaflet 时遇到了同样的问题。上面的解决方案有效，但我想添加一些细节以进行说明：

"browserslist": 
[
  ">0.2%",
  "not dead",
  "not op_mini all"
],

注意上面的package.json代码需要准确，意思是删除后上面的代码中没有{ }：

"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]

来自：

"browserslist": {
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]},

另外，在您的终端上输入 cd，然后输入 ls，看看是否有 package.json 和 node_modules。如果它们在那里，rm -rf filename 删除它们（因为您可能随着时间的推移在忘记导航到您的项目时错误地添加了它们并且错误地 npm i or yarn 它们）。

最后，再次安装react-leaflet，应该可以了。（注意：重装最新版本后，看看你的package.json是否更新到3.2.0（或最新版本），如果没有，把你package.json上的react-leaflet改成手动安装最新版本。）

Answer 10

这并不直接适用于原始问题（说明适用于 create-react-app 起源的项目），但我仍在写答案，以防除我之外的某些 CRA 用户碰巧遇到这个问题。

我不想强制使用旧的 react-leaflet 版本
由于我使用的是 create-react-app（yarn start 只是强制刷新了配置），所以几个答案中建议的浏览器列表更改没有起作用（yarn start 只是强制刷新配置）
@WITO 的建议并没有直接奏效，同样的原因（由于使用 create-react-app 无法直接控制 webpack/babel 配置文件）
从 CRA 中退出是一种选择，但我不想仅仅因为这个原因就这样做。

最终起作用的是使用两个库 react-app-rewired and react-app-rewire-babel-loader。必要步骤：

yarn add -D react-app-rewired react-app-rewire-babel-loader
根据 react-app-rewired 的说明更改 package.json 中的脚本名称：

  /* package.json */

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

根据react-app-rewire-babel-loader的说明在项目根目录下创建config-overrides.js:

/* config-overrides.js */

const path = require("path");
const fs = require("fs");
const rewireBabelLoader = require("react-app-rewire-babel-loader");
 
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = function override(config, env) {
    config = rewireBabelLoader.include(
        config,
        resolveApp("node_modules/@react-leaflet")
    );
    config = rewireBabelLoader.include(
        config,
        resolveApp("node_modules/react-leaflet")
    );

    return config;
};

然后就可以了。基本上，这包括 babel 转译中的 react-leaflet，就像@WITO 对非 CRA 构建的回答一样。

Answer 11

破解您的 browserslist 或降级软件包并不是处理 don't target a reasonable version of JS. @jlahd's answer is great, except that react-app-rewire-babel-loader is no longer supported by its author. You can achieve the same result even more easily with customize-cra (which you should be using with CRA anyway, since that's the only way to configure your Content Security Policy) by using babelInclude:

模块的安全或长期解决方案

// config-overrides.js

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

module.exports = {
  webpack: override(
    babelInclude([
      path.resolve('src'),
      path.resolve('node_modules/@react-leaflet'),
      path.resolve('node_modules/react-leaflet')
    ])
    // and configure other stuff here like csp-html-webpack-plugin
  ),
};

Answer 12

对于那些运行 nextjs.

您可以在 next.config.js 文件中修复这个启用 webpack 5 的问题。

const nextConfig = {
  future: {
    webpack5: true,
  },
};

module.exports = nextConfig;

感谢 marcin-piechaczek 的评论： https://github.com/PaulLeCam/react-leaflet/issues/883#issuecomment-849126348

将 react-leaflet 升级到版本 3.2.0 以修复从地图中删除带有永久工具提示的标记时出现的错误后出现此错误。

Answer 13

将 "@types/leaflet": "1.7.0" 添加到 package.json.

的依赖项中

Answer 14

在其源代码中，React-Leaflet 使用了特定版本的 Acorn 不支持的 Nullish Coalescing 运算符。

有关更多详细信息，请在此处查看 nnatter 的解释：

https://github.com/PaulLeCam/react-leaflet/issues/883

要解决此问题，您可以：

1- 使用 nnater 建议的解决方案：

https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

或

2 - 您可以使用

而不是使用官方的 React-Leaflet 包

npm install --save @monsonjeremy/react-leaflet

来自

https://www.npmjs.com/package/@monsonjeremy/react-leaflet

这是 RL 3.2.1 的一个分支。

这样你就不必降级也不必做有趣的事情。

Answer 15

安装 react-leaflet 后，现有的 package.json 将是这样的：

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

但是在运行上它会显示这样的错误：

 ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

要修复此错误，请将上述 package.json 文件更改为 ( 作为数组):

"browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],

然后转到节点模块删除 .cache 文件夹
使用 ctrl C
再次执行 npm install

Answer 16

对于那些使用 nextjs 的人

在组件中创建地图并使用 ssr:false;

导入

示例：

组件：Map.js

const OpenMap = () => {
  return (
    <div className="container">
      <MapContainer MapContainer style={{ height: '300px' }} center={[60.198334, 24.934541]} zoom={10}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
};

像这样将地图导入页面或您需要的地方：

Somewhere.js

import dynamic from 'next/dynamic'; // for dynamic importing
const OpenMap = dynamic(() => import('@/features/client/location/components/OpenMap'), {
  ssr: false,
});

那你就可以用了...

此外，如果需要，您可以添加加载组件。

有关动态导入的更多详细信息，请单击 here

查看 link

Answer 17

您需要更新 react-scripts 来解决 package.json 中的这个问题：

"react-scripts": "^5.0.0",

Answer 18

在 package.json 中安装此模块：

    "leaflet": "^1.6.0",
    "react-leaflet": "^3.2.0",

然后删除 node-moduales 中的 @react-leaflet forler 在您的系统中，在任何文件夹中使用 cmd

git 克隆 https://github.com/hqdung99/maps-leaflet-youtube.git

完成后转到文件夹 node-modules 并复制此文件夹 @react-leaflet 并粘贴到上一个 node-modules 文件夹

如何修复错误 "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

javascript

leaflet

typescript

reactjs

react-leaflet