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

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

npm安装传单react-mobile@types/react@types/mobile--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>
    );
}; 

从“React”导入React；
导入“./styles.css”；
从“传单”导入L，{latlngeexpression}；
导入“传单/目录/传单.css”；
从“react传单”导入{MapContainer、TileLayer、Marker、Popup}；
常量位置：LatLngExpression=[59.91174337077401,10.750425582038146]；
导出默认函数MapJar（）{
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
}; 

我多次尝试重新安装依赖项，但仍然不起作用

我理解这是一个简单的问题，也是我正在犯的一个错误，但是，我一直无法解决这个错误

---

欢迎您的任何意见。提前感谢。

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

• 删除节点_模块
• 删除“package lock.json”
• 将“package.json”中的传单和react传单版本更改为：“react传单”：“^2.7.0”和“传单”：“^1.6.0”
• 运行“npm安装”
• MapContainer组件未在2.7.0版本中定义，因此您应该改用Map
• 向组件添加一些样式（长度）以查看地图

---

希望这能对您有所帮助。

我已经解决了这个问题，将其降级为“react传单”：“2.7.0”，

这个问题最终似乎与创建react应用程序及其捆绑文件的方式有关，如果您从以下位置替换浏览器目标，问题似乎会得到解决：

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

到

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

积分进入bkiac

编辑

如果下载，您可以复制错误和修复。当您打开它时，它可以工作，但是如果您下载它并在本地运行它，您可以使用

package.json

中的第一个

browslist

选项看到错误。如果停止服务器，请使用新的选项替换

浏览器列表

选项，然后重新运行应用程序，您可以看到它按预期工作。

添加

"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文件并按如下方式编辑浏览器列表

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

到

完成此操作后，请删除

node\u modeules/.cache

目录

然后尝试

npm安装

和

npm启动

Tadaaa

参考资料：-

---

我在执行npm更新后遇到此问题

安装了以下软件包：

“反应传单”：“^3.2.0”

和作为依赖项（位于.lock中）：

“@react传单/核心”：“1.1.0”，

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

“@react传单/核心”：“1.0.2”，

“反应传单”：“3.1.0”，

---

所以试试看我的反应-leaflet@3.1.0@react传单/core@1.0.2

我也有同样的问题，但这里计划的所有解决方案都无法说服我。所以我用下面的方法解决了这个问题：

纱线添加-D@babel/plugin建议空聚结运算符

然后我将它添加到

babel.config.js

module.exports={
预设：[
//…这里有一些预设
],
插件：[
//…这里有插件吗
“@babel/plugin建议nullish合并运算符”，
],
环境：{
//…您的配置
},
}

由于库使用nullish（？？）操作符，所以出现了问题，我应该将其添加到webpack中bable加载程序的排除列表中

//webpack.common.js
module.exports={
//…这里有一些配置
模块：{
规则：[
{
测试：/\（js|jsx）$/，
//必须排除@react传单和react传单库。
排除：/node_modules\/（？！（@react-mobile | react-mobile）\/）i，
使用：[]
}
],
//…这里有更多配置
}

正如其他人所说，我通过更改

浏览器列表解决了这个问题。我的
浏览器列表现在如下所示：

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

然后，我做了以下工作：

删除您的
节点\u模块
文件夹
运行npm缓存清理--force
运行
npm安装
现在，一切都应该按预期进行。如果地图未加载，请不要忘记将传单css和js添加到您的页面，并设置地图容器的高度。有关更多信息，请参阅。我使用react传单的3.2.0版遇到了相同的问题。上述解决方案可行，但我想添加一些细节以供澄清目的：

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

请注意上述package.json代码需要精确，这意味着删除后上述代码中没有
{}
：

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

发件人：

另外，在终端上，键入
cd
，然后键入
ls
，查看周围是否有package.json和node_模块。如果有，则键入
rm-rf filename
删除它们（随着时间的推移，您可能会错误地添加它们，因为您忘记了导航到您的项目，并且错误地添加了它们）

最后，再次安装react传单，它应该可以工作。（注意：在重新安装到最新版本后，查看您的package.json是否已更新到3.2.0（或最新版本），如果没有，只需将package.json上的react传单更改为最新安装版本。）
"browserslist": [
  ">0.2%",
  "not dead",
  "not op_mini all"
]

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

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

/* 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;
};

// 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
  ),
};