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

html5 • • 问答

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

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 dead",
  "not op_mini all"
],

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

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

然后试试 npm install

和 npm start

多啊！

参考：-

  • https://github.com/facebook/create-react-app/issues/9468#issuecomment-694191642
  • https://github.com/PaulLeCam/react-leaflet/issues/877
  • not working, same error

回答

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

到

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

积分转到bkiac 官方 create-react-app github 问题

编辑

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

回答

我在做 npm update 后遇到了这个问题。

安装了这些软件包：
"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 dead",
  "not op_mini all"
]

然后我做了以下事情：

  1. 删除你的node_modules文件夹
  2. 跑 npm cache clean --force
  3. 跑 npm install

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

回答

破解browserslist或降级包不是处理不针对合理版本的 JS 的模块的安全或长期解决方案。@ jlahd的答案是伟大的，除了react-app-rewire-babel-loader是不再支持其作者。通过使用以下命令，您可以更轻松地获得相同的结果customize-cra（无论如何您都应该将其与 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
  ),
};

以上是如何修复错误“无法编译：./node_modules/@react-leaflet/core/esm/path.js10:41模块解析失败：意外令牌（10:41）”的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>