Javascript “如何修复错误”;未能编译:./node_modules/@react-palicate/core/esm/path.js 10:41模块解析失败:意外令牌(10:41)";
我正在尝试创建一个react-typescript应用程序以及传单。我用了命令Javascript “如何修复错误”;未能编译:./node_modules/@react-palicate/core/esm/path.js 10:41模块解析失败:意外令牌(10:41)";,javascript,reactjs,typescript,leaflet,react-leaflet,Javascript,Reactjs,Typescript,Leaflet,React Leaflet,我正在尝试创建一个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 loader
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='© <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强>
参考资料:-
“反应传单”:“^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
),
};