如何修复错误“无法编译：./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌10:41”

如何解决如何修复错误“无法编译：./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌10:41”

我正在尝试创建一个 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"
  }
}

这是地图/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>
    );
};

我多次尝试重新安装依赖项，但仍然无效。

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

感谢任何输入。提前致谢。

解决方法

我找到了解决方法。

修复步骤：-

打开您的 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 op_mini all"
],

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

然后尝试npm install

和npm start

Tadaaa！

参考文献：-

该问题最终似乎与 create-react-app 及其捆绑文件的方式有关，如果您从以下位置替换浏览器目标似乎可以解决：

"browserslist": {
   "production": [
      ">0.2%",

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

学分归bkiac official create-react-app github issue

编辑

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

添加

"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 ie <= 11","not op_mini all"
  ]
}

我在做 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

我按照其他人的说法通过更改 browserslist 解决了这个问题。我的 browserslist 现在看起来像这样：

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

然后我做了以下事情：

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

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

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

我不想强制使用较旧的 react-leaflet 版本
几个答案中建议的浏览器列表更改不起作用，因为我使用的是 create-react-app（yarn start 只是强制刷新配置）
@WITO 的建议没有直接生效，原因相同（由于使用了 create-react-app，没有直接控制 webpack/babel 配置文件）
从 CRA 驱逐本来是一种选择，但我不想仅仅因为这个原因而走这条路。

最终起作用的是使用两个库 react-app-rewired 和 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 构建所做的回答一样。

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

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
   
}

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

"browserslist": 
[
  ">0.2%",

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

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

来自：

"browserslist": {
"production": [
  ">0.2%","development": [
  "last 1 chrome 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改成最新安装的版本即可手动。）

破解您的 browserslist 或降级软件包不是处理 don't target a reasonable version of JS 模块的安全或长期解决方案。 @jlahd 的回答很好，除了 react-app-rewire-babel-loader 是其作者的 no longer supported。通过使用 customize-cra，您可以更轻松地使用 Content Security Policy 获得相同的结果（无论如何您应该将其与 CRA 一起使用，因为这是配置您的 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
  ),};

我以前遇到过这个问题。

通过安装 ‍‍@react-leaflet/core@1.0.2 包，我能够解决我的问题

对于那些运行 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 版本以修复从地图中删除带有永久工具提示的标记时出现的错误。

将"@types/leaflet": "1.7.0" 添加到 package.json 的依赖项中。这是我的工作。

我已经解决了这个问题，降级为 "react-leaflet": "2.7.0",

我在使用最新版本的传单“^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 install”
MapContainer 组件在 2.7.0 版本中未定义，因此您应该使用 Map 代替。
向组件添加一些样式（长度）以查看地图。

希望能帮到你。

如何修复错误“无法编译：./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌10:41”

如何解决如何修复错误“无法编译：./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌10:41”

解决方法

相关推荐