Как исправить ошибку «Не удалось скомпилировать: ./node_modules/@react-leaflet/core/esm/path.js 10:41 Ошибка синтаксического анализа модуля: неожиданный токен (10:41)»

Я столкнулся с этой проблемой после обновления 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

Тадааа!

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

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