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

Posted 2023-02-22

【中文标题】如何修复错误“编译失败：./node_modules/@react-leaflet/core/esm/path.js 10:41 模块解析失败：意外令牌（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)"

【发布时间】：2021-08-05 16:08:30

【问题描述】：

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

我尝试了几次重新安装依赖项，但仍然没有成功。

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

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

【问题讨论】：

这似乎是 CRA 的 open issue。另一方面，@react-leaflet/core 模块的 tsconfig 目标是 ES2019，这意味着在构建包时，?? 运算符应该已经转译为其他内容。我会考虑在 react-leaflet repo 上打开一个问题，说这条线似乎没有按照 tsconfig 的规定正确编译到 ES2019

谢谢@SethLutske！我发现了几个小时前发布的确切问题github.com/PaulLeCam/react-leaflet/issues/877

【参考方案1】：

我找到了解决方法。

修复步骤：-

打开您的 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！

参考：-

https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642 https://github.com/PaulLeCam/react-leaflet/issues/877

【讨论】：

您是否尝试删除 node_modules/.cache 目录？ @hoogw

我试过这个，但在npm start 上，我收到提示：“我们无法检测到目标浏览器。您想将默认值添加到您的 package.json 中吗？ › (Y /n)"。如果我点击否，CRA 退出并显示消息“从 react-scripts >=2 开始，您必须指定目标浏览器。请在您的 package.json 中添加 browserslist 键。”如果我点击是，它会将我的 package.json 覆盖回原来的状态，继续，然后再次失败并显示相同的消息。这适用于 react-scripts 4.0.1。有人遇到过吗？对我有什么建议吗？

为我工作，谢谢！ rm -rf node_modules/.cache/ 是必要的。

我的 package.json 看起来就像你指出的那样。我的错误，与 OP 的相同......我试图删除缓存文件夹并完全删除 node_modules。它仍然无法正常工作。

这个答案真的救了我！

【参考方案2】：

这个问题最终似乎与 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 选项替换为新选项并重新运行应用程序，您可以看到它按预期工作。

【讨论】：

在我的情况下，如果您删除开发对象，请使用以下内容响应答案：“从 react-scripts >=2 开始，您必须指定目标浏览器。”。然后它退出。你有哪个版本的 react-scripts？

"react-leaflet": "^3.2.0" 和 "react-scripts": "4.0.3"

如下所示，您还应该删除缓存：node_modules/.cache。这对我有用。

【参考方案3】：

我在进行 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

【讨论】：

谢谢@SchitzelKraft！这是经过许多其他尝试后对我有用的解决方案。我认为有希望的是***.com/a/67991412/558732，但它并没有解决我的问题。

【参考方案4】：

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

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

然后我做了以下事情：

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

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

【参考方案5】：

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

【讨论】：

我很欣赏您解决此问题的推理和方法 - 快速修复设置而不是解决潜在问题不是前进的方向。我将尝试这个解决方案，如果它对我有用，我会告诉你。

我仍然遇到同样的问题：“编译失败”，并指向./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)

与 OP 的一个区别是我的文件正在由不同的加载程序处理（这超出了我的理解范围）：File was processed with these loaders: * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders.

您的 npm 脚本是否使用 react-app-rewired 而不是 react-scripts？我在我的一个内部项目中使用了上面的文件（所以不需要 CSP 的东西）。

我没有手动更改它们。安装 custom-cra 和 react-app-rewired 会改变它们吗？我最终选择了@SchitzelKraft 的解决方案（上图，***.com/a/67689949/558732），在删除节点模块和清理缓存之后，版本更改起作用了。我想测试您的解决方案并确保替换反应脚本。

【参考方案6】：

添加

"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"
  ]

【参考方案7】：

这并不直接适用于原始问题（说明适用于 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 构建的回答一样。

【讨论】：

这是迄今为止最好的答案，尽管 react-app-rewire-babel-loader 是 no longer supported。

【参考方案8】：

安装 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

【参考方案9】：

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

欲了解更多详情，请在此处查看 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 的一个分支。

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

【参考方案10】：

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

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
  ,

由于库使用 nullish (??) 运算符而出现问题，我应该将其添加到 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
   

【讨论】：

不确定如何将其应用于 Storybook，尽管这似乎是最合理的解决方案

【参考方案11】：

我在使用 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更改为最新安装的版本手动。）

【参考方案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 以修复从地图中删除带有永久工具提示的标记时出现的错误后出现此错误。

【参考方案13】：

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

【参考方案14】：

对于那些使用 nextjs 的人

在组件中创建地图并使用s-s-r: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'), 
  s-s-r: false,
);

那你就可以用了……

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

更多动态导入详情请点击here链接查看

【参考方案15】：

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

【讨论】：

这与其他人放在这里的答案完全相同。这根本不是这个问题的解决方案。引用@kboul 的字面意思，“降级到以前的版本并不能解决特定问题，特别是对于那些将库用于大型项目并且两个版本（2.x 和 3.x）之间存在重大变化的人. 那你会怎么做？从头开始重写所有代码？”。问题在于 react-leaflet 在其构建过程中的编译方式，以及 CRA 处理 ?? 运算符的方式。

这也会产生更深层次的问题，react-leaflet 3 与 react-leaflet 2 完全不同。

【参考方案16】：

我在使用最新版本的传单时遇到了同样的问题：“^3.2.0”，但我确实通过降级到版本 2.7.0 克服了这个问题。您应该这样做：

删除节点模块 删除“package-lock.json” 将“package.json”中的leaflet和react-leaflet版本更改为：“react-leaflet”：“^2.7.0”和“leaflet”：“^1.6.0”， 运行“npm install” 2.7.0版本没有定义MapContainer组件，所以应该改用Map。 为组件添加一些样式（长度）以查看地图。

【讨论】：

降级到以前的版本并不能解决特定问题，特别是对于那些将库用于大型项目并且两个版本（2.x 和 3.x）之间存在重大变化的人.那你会怎么做？从头开始重写所有代码？