오류 수정 방법: ./node_modules/@react-leaflet/core/esm/path.js 10:41 모듈 해석 실패:예기치 않은 토큰(10:41)
리액트 타입의 스크립트 앱을 리플릿과 함께 만들려고 합니다.명령어를 사용했는데
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;
여기 제 소포가 있습니다.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>
);
};
의존관계 재인스톨을 여러 번 시도했지만, 아직 동작하지 않았습니다.
이것은 단순한 문제이며, 제가 하고 있는 오류인 것은 알고 있습니다만, 아직 이 오류를 해결할 수 없습니다.
고칠 방법을 찾았어요
수정 절차:
패키지를 엽니다.다음과 같이 json 파일을 작성하고 브라우저 목록을 편집합니다.
패키지 #9468에서 사용하면 연산자가 "예상하지 않은 토큰" 오류를 발생시킵니다.
"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
짠!
참고 자료:
- ? 패키지 #9468에서 사용하면 오퍼레이터가 "예기치 않은 토큰" 오류를 발생시킨다.
- 모듈 해석 실패:@react-leaflet/core/esm/path.js #877에 예기치 않은 토큰(10:41)이 있습니다.
이 문제는 결국 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 공식 Create-React-App GitHub 발행으로 넘어갑니다.
이 코드와 상자를 다운로드하면 오류와 수정을 재현할 수 있습니다.열면 동작하지만 다운로드하여 로컬로 실행하면 첫 번째를 사용하여 오류를 볼 수 있습니다.browserslist의 package.json 「」 「」 「」 「」를 치환합니다.browserslist새로운 어플리케이션과 재실행 옵션을 선택하면 정상적으로 동작하는 것을 알 수 있습니다.
npm 업데이트 후 이 문제가 발생하였습니다.
되었습니다."react-leaflet": "^3.2.0"
잠그다 "@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"
]
다음으로 다음 작업을 수행했습니다.
- node_modules 폴더를 삭제합니다.
- 실행합니다.
npm cache clean --force - 실행합니다.
npm install
이제 모든 것이 예상대로 작동해야 합니다.맵이 로드되지 않은 경우, 잊지 말고 전단 CSS와 JavaScript를 페이지에 추가하고 맵 컨테이너의 높이를 설정하십시오.자세한 내용은 공식 문서를 참조하십시오.
browserslist또는 패키지를 다운그레이드 하는 것은 JS의 합리적인 버전을 타깃으로 하지 않는 모듈을 취급하는 안전하고 장기적인 솔루션이 아닙니다.jlahd의 답변은 훌륭합니다.단,react-app-rewire-babel-loader는 작성자에 의해 지원되지 않게 되었습니다.(콘텐츠 보안 정책을 설정하는 유일한 방법이기 때문에 CRA와 함께 사용해야 합니다)를 사용하면 보다 쉽게 동일한 결과를 얻을 수 있습니다.
// 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": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"
"context.json"에서
두 번째 해결책
문제가 해결되지 않으면 패키지에서 온 것일 수 있습니다.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"
]
}
저도 같은 문제가 있었습니다만, 여기서 계획한 모든 해결책으로는 납득이 가지 않았습니다.그래서 다음과 같은 방법으로 해결했습니다.
yarn add -D @babel/plugin-proposal-nullish-coalescing-operator
했습니다.babel.config.js:
module.exports = {
presets: [
// ... some presets here
],
plugins: [
// ... any plugins here
'@babel/plugin-proposal-nullish-coalescing-operator',
],
env: {
// ... your configuration
},
}
문제가 발생하면 라이브러리에서 nullish(--) 연산자를 사용하고 있기 때문에 웹 팩의 bable-loader 제외 목록에 추가해야 합니다.
// webpack.common.js
module.exports = {
// ... some configuration 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 configuration here
}
이것은 원래의 질문에는 직접 적용되지 않습니다(지시는 CRA(Create-React-App)가 발신한 프로젝트에 대한 것입니다).하지만, 저 이외의 CRA 유저가 이 질문에 대해 우연히 알게 되었을 경우에 대비하여, 저는 아직 답을 쓰고 있습니다.
- 이전 리액트 리플릿 버전을 강제로 사용하고 싶지 않았습니다.
- create-react-app을 사용하고 있기 때문에 몇 가지 답변에서 제시된 브라우저 목록 변경이 작동하지 않았습니다(
yarn start의 - 같은 이유로 WITO의 제안은 직접 작동하지 않았습니다(create-react-app을 사용하여 Webpack/Babel 구성 파일을 직접 제어할 수 없습니다).
- CRA에서 이젝트하는 것도 하나의 방법이지만, 저는 이 이유만으로 그렇게 하고 싶지 않습니다.
마지막으로 성공한 것은 react-app-re-wired와 react-app-rewire-babel-loader 두 개의 라이브러리를 사용하는 것이었습니다.필요한 절차:
yarn add -D react-app-rewired react-app-rewire-babel-loader에서 합니다.
package.jsonreact-app-rewired: app-rewired에 따라 ./* 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" }config-overrides.jsapp-rewire-babel-display에 이동합니다./* 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; };
그리고 효과가 있다.기본적으로 여기에는 WITO의 답변이 비 CRA 구축에서와 같은 방식으로 Babel의 리액트 리플릿이 포함됩니다.
리액트 리플릿 설치 후 기존 패키지.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;
- 버그를 수정하려면 위의 패키지를 변경하십시오.json 파일 대상(어레이로):
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ],
- 그런 다음 node_modules 폴더로 이동하여 .cache 폴더를 삭제합니다.
- + 를 사용하여 서버를 정지합니다.
- npm 설치 재실행
Next.js를 실행 중인 사용자용.
이 문제는 next.config.js 파일에서 Webpack 5를 사용하도록 설정할 수 있습니다.
const nextConfig = {
future: {
webpack5: true,
},
};
module.exports = nextConfig;marcin-piechaczek의 코멘트 덕분에:Nullish 병합 연산자로 인해 패키지가 webpack 4 #883과 호환되지 않습니다.
리액트 리플릿을 버전 3.2.0으로 업그레이드하여 영구 툴팁이 있는 마커를 맵에서 삭제하면서 오류를 수정한 후 이 오류가 발생하였습니다.
React-Leaflet(RL)의 소스 코드에서는 특정 버전의 Acon에서 지원되지 않는 늘 병합 연산자를 사용합니다.
자세한 것은, 다음의 nnatter 의 설명을 참조해 주세요.
https://github.com/PaulLeCam/react-leaflet/issues/883
이 문제를 해결하려면 다음 작업을 수행합니다.
nater가 제안하는 솔루션을 사용합니다.
https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator
또는
React-Leaflet 공식 패키지를 사용하는 대신
npm install --save @monsonjeremy/react-leaflet부터
https://www.npmjs.com/package/ @monsonjeremy / https://www.npmjs.com/package/ 리플릿
RL 3.2.1의 포크입니다.
그렇게 하면 다운그레이드나 재미있는 일을 할 필요가 없다.
package.json 의존관계에 "@types/leaflet": "1.7.0"을 추가합니다.
리액트 리플릿 버전 3.2.0에서도 같은 문제에 직면했습니다.이전 답변의 솔루션은 성공했지만, 설명을 위해 몇 가지 세부 사항을 추가하고 싶습니다.
"browserslist":
[
">0.2%",
"not dead",
"not op_mini all"
],
주의:위의 패키지입니다.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에 어 followed가 붙는다.ls소포가 있는지 확인하세요.json 파일과 node_module이 놓여 있습니다.만약 그들이 거기 있다면rm -rf filename 및 「」의, 이 지남에 ).npm i or yarn（ 해た ）
마지막으로 리액트 리플릿을 다시 설치하면 동작합니다.(주의: 패키지가 있는지 확인합니다.최신 버전으로 재설치 후 json이 3.2.0(또는 최신 버전)으로 업데이트되었습니다.그렇지 않은 경우 패키지의 리액트 리플릿을 변경하기만 하면 됩니다.json 파일을 수동으로 최신 버전의 설치로 변경합니다.)
Next.js를 사용하는 사용자용
컴포넌트에 맵을 생성하여 Import하다ssr:false;
예:
컴포넌트: Map.js
const OpenMap = () => {
return (
<div className="container">
<MapContainer MapContainer style={{ height: '300px' }} center={[60.198334, 24.934541]} zoom={10}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
</div>
);
};
다음과 같이 맵을 페이지 또는 필요한 곳으로 Import합니다.
파일 Somewhere.js
import dynamic from 'next/dynamic'; // for dynamic importing
const OpenMap = dynamic(() => import('@/features/client/location/components/OpenMap'), {
ssr: false,
});
그럼 그걸 쓰시면...
또한 필요한 경우 로드 구성 요소를 추가할 수 있습니다.
동적 Import에 대한 자세한 내용은 여기를 클릭하여 링크를 확인하십시오.
파일 패키지의 이 문제를 해결하려면 react-scripts를 업데이트해야 합니다.json:
"react-scripts": "^5.0.0",
이러한 모듈을 파일 패키지에 설치합니다.json:
"leaflet": "^1.6.0",
"react-leaflet": "^3.2.0",
그런 다음 시스템의 node_modules 폴더에 있는 @react-leaflet 폴더를 cmd와 함께 삭제합니다.
git clone https://github.com/hqdung99/maps-leaflet-youtube.git
완료되면 node_modules 폴더로 이동하여 이 폴더 @react-leaflet을 복사하여 이전 node_modules 폴더에 붙여넣습니다.
리액트 리플릿(2.7.0)으로 다운그레이드합니다.
최신 버전의 리플릿에서도 같은 문제가 발생했지만 버전 2.7.0으로 다운그레이드하여 이 문제를 해결했습니다.해야 할 일은 다음과 같습니다.
- node_modules를 삭제합니다.
- package-lock.json'을 삭제합니다.
- "package.json"의 전단 및 리액트 리플릿 버전을 "react-leaf": "^2.7.0" 및 "리플릿": "^1.6.0",
- "npm install" 실행
- MapContainer 컴포넌트는 2.7.0 버전에서는 정의되어 있지 않으므로 대신 Map을 사용해야 합니다.
- 맵을 보려면 구성요소에 스타일(길이)을 추가합니다.
언급URL : https://stackoverflow.com/questions/67552020/how-to-fix-error-failed-to-compile-node-modules-react-leaflet-core-esm-pat
'programing' 카테고리의 다른 글
| iOS에서 디바이스 제조 및 모델을 얻는 방법 (0) | 2023.04.10 |
|---|---|
| JSON을 해석하고 값을 어레이로 변환하는 방법 (0) | 2023.04.05 |
| 각도 ng-repeat에 의한 부트스트랩 행 추가(3 또는 4 col마다) (0) | 2023.04.05 |
| ASP를 참조합니다.JavaScript에서 ID에 의한 NET 제어? (0) | 2023.04.05 |
| 실전 가동과 개발의 검출 런타임에 대응 (0) | 2023.04.05 |