Как исправить ошибку «Не удалось скомпилировать: ./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;

Вот мой 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>
    );
}; 

Я несколько раз пытался переустановить зависимости, но все равно не получалось.

Я понимаю, что это простая проблема и ошибка, которую я делаю, но, тем не менее, мне не удалось устранить эту ошибку.

Любой вклад приветствуется. Заранее спасибо.

Ответов (7)

Я столкнулся с этой проблемой после обновления 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 [email protected] @react-leaflet/[email protected]

У меня была такая же проблема, но все запланированные здесь решения меня не убедили. Я решил это следующим образом:

yarn add -D @babel/plugin-proposal-nullish-coalescing-operator

затем я добавил его в плагины babel в babel.config.js

module.exports = {
  presets: [
    // ... some presets here
  ],
  plugins: [
    // ... any plugins here
    '@babel/plugin-proposal-nullish-coalescing-operator',
  ],
  env: {
    // ... your config
  },
}

поскольку проблема возникает из-за того, что библиотека использует нулевой оператор (??), я должен добавить его в список исключений загрузчика bable в webpack.

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

Я столкнулся с той же проблемой с последней версией буклета: «^ 3.2.0», но я решил эту проблему, вернувшись к версии 2.7.0. Вот что вам следует делать:

  • Удалите node_modules
  • Удалите package-lock.json.
  • Измените версии листовок и ответов на листовки в "package.json" на: "react-leaflet": "^ 2.7.0" и "leaflet": "^ 1.6.0",
  • запустите "npm install"
  • Компонент MapContainer не определен в версии 2.7.0, поэтому вместо него следует использовать Map.
  • Добавьте стиль (длину) к компонентам, чтобы увидеть карту.

Надеюсь, это может вам помочь.

Я решил эту проблему, перейдя на "реакцию-листовка": "2.7.0",

Проблема в конечном итоге, похоже, связана с приложением create-response-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- response -app на github

Редактировать

Вы можете воспроизвести ошибку и исправление, если загрузите этот код и исправление . Когда вы его открываете, он работает, но если вы загрузите его и запустите локально, вы можете увидеть ошибку, используя первые browserslist параметры в package.json . Если вы остановите сервер, замените browserslist параметры на новые и повторно запустите приложение, вы увидите, что оно работает должным образом.

Добавить

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

Я нашел способ исправить это.

Шаги по исправлению: -

Откройте файл 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_modeules/.cache каталог.

Тогда попробуй npm install

а также npm start

Тадааа!

Использованная литература:-