Модуль не может быть проанализирован: Неожиданный токен (10:25) Файл обработан с помощью следующих загрузчиков:

Вопрос или проблема

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

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.25.4",
    "@babel/preset-typescript": "^7.24.7",
    "@react-leaflet/core": "^2.1.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "babel-loader": "^9.2.1",
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.6",
    "install": "^0.13.0",
    "jwt-decode": "^4.0.0",
    "leaflet": "1.7.1",
    "react": "^19.0.0-rc-a99d8e8d-20240916",
    "react-dom": "^19.0.0-rc-a99d8e8d-20240916",
    "react-icons": "^5.3.0",
    "react-leaflet": "^4.2.1",
    "react-router": "^6.26.2",
    "react-router-dom": "^6.26.2",
    "react-scripts": "^3.3.0-next.38",
    "redbox-react": "^1.6.0",
    "styled-components": "5.3.10",
    "universal-cookie": "^7.2.0",
    "util": "^0.12.5",
    "web-vitals": "^2.1.0"
  },
  "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": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/leaflet": "^1.9.12"
  }
}

Ответ или решение

Ошибка Module parse failed: Unexpected token (10:25) может возникать по нескольким причинам при использовании Leaflet с React в сочетании с Babel и Webpack. Давайте рассмотрим шаги для устранения этой проблемы.

1. Обновление версий зависимостей

У вас установлены предварительные версии некоторых пакетов React, таких как react и react-dom. Попробуйте перейти на стабильные версии:

"react": "^18.2.0",
"react-dom": "^18.2.0",

Кроме того, убедитесь, что вы используете последнюю совместимую версию react-leaflet. Проверку совместимости можно сделать на странице документации.

2. Проверка конфигурации Babel

Убедитесь, что у вас корректно настроены пресеты Babel. Для поддержки современных JavaScript- и JSX-синтаксических конструкций добавьте в ваш .babelrc (или аналогичный конфигурационный файл) следующие строки:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. Конфигурация Webpack

Если вы используете Webpack, убедитесь, что ваш webpack.config.js правильно настроен для обработки файлов JavaScript и JSX. Пример конфигурации может выглядеть следующим образом:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/, // Обрабатывать файлы .js, .jsx, .ts, .tsx
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/, // Обработка CSS файлов
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'], // Поддержка этих расширений
  },
};

4. Убедитесь в корректности используемых версий

Также проверьте все пакеты на совместимость. Некоторые библиотеки могут работать некорректно с определёнными версиями React или других библиотек. Используйте команду:

npm outdated

для проверки устаревших зависимостей и обновите их, если это возможно.

5. Включение поддержки Leaflet

Если вы добавляете Leaflet, не забудьте импортировать CSS стили. В вашем основном компоненте или в index.js, добавьте:

import 'leaflet/dist/leaflet.css';

6. Проверка кода компонентов

Если вы используете какие-либо специальные конструкции или синтаксис, убедитесь, что они поддерживаются актуальной конфигурацией Babel. Иногда проблема может заключаться в синтактических ошибках в компонентах.

7. Логи и дополнительная информация

Проверьте логи в консоли браузера или терминале. Они могут дать подсказки о том, где именно происходит ошибка. Возможно, полезно будет также посмотреть на ошибки в ESLint, если он настроен в вашем проекте.

Заключение

Следуйте вышеописанным шагам для устранения проблемы с компиляцией. Если ошибки сохраняются, может быть полезно создать новый проект и пошагово добавлять зависимости, чтобы определить, в какой момент возникает проблема.