Решение SyntaxError: Unexpected token в webpack и babel-loader

Быстрый ответ

Для исправления этой ошибки, вам потребуется добавить @babel/preset-react в вашу конфигурацию Babel для корректного распознавания JSX:

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

Установить этот пресет можно с помощью следующей команды:

npm install @babel/preset-react --save-dev

Теперь Babel без проблем обработает код на JSX.

Разбор ошибки

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

Настройка конфигурации: webpack и babel-loader

Обновление webpack через babel-loader

Прежде всего, необходимо настроить webpack для работы с babel-loader:

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

Подробнее об этом расскажет наш спикер на видео

Файл .babelrc

Создайте или обновите файл .babelrc в корневом каталоге вашего проекта:

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

Добавление @babel/preset-stage-0 позволит вам использовать экспериментальные возможности JavaScript.

Совместимость

Не забывайте обеспечивать совместимость babel-loader'а с версией вашего webpack:

npm install babel-loader@8.0.6 --save-dev

Горячая замена модулей

Для продуктивной разработки и использования горячей замены модулей используйте react-hot-loader:

npm install react-hot-loader --save-dev

Помните о необходимости включить его в файл .babelrc.

Визуализация

Представьте ошибку в виде двери, которая требует подходящего ключа для открытия:

Дверь: [🔒 JSX]
Ключ:  [🔑 .jsx]
Неправильный: [❌ .js]

babel-loader – это своего рода мастер по подбору ключей:

Без Babel: [❌ .js] (#ещенеjsx)
С Babel:  [🔑 .jsx] (#jsxкруто)

Если Babel не распознает файл .js как JSX, то результат следующий:

|  Конфигурация  |  Ключ    |   Результат    |
|----------------|----------|----------------|
| Неправильная   | [❌ .js] | Дверь закрыта 🔒|
| Правильная     | [🔑 .jsx]| Дверь открыта 🔓|

Так что давайте настроим babel-loader на обработку файлов .jsx с помощью правильного "ключа": конфигурации Babel.

Поиск и устранение неполадок

Babel runtime и плагины

Иногда проблемы могут вызвать @babel/runtime или другие плагины. Проверьте их настройку:

npm install @babel/runtime --save
npm install @babel/plugin-transform-runtime --save-dev

Добавьте плагин в ваш файл .babelrc.

Поиск синтаксических ошибок

Внимательно проверьте ваш JSX-код на наличие синтаксических ошибок, особенно в файле main.js.

webpack.config.js

Помните о необходимости исключения папки node_modules из обработки webpack'ом.

React и синтаксис

При работе с React используйте актуальный синтаксис ReactDOM.render(), а не устаревший React.render().

Продвинутое устранение неполадок

Если ошибка все ещё присутствует

Повторно проверьте webpack.config.js и .babelrc на наличие опечаток и других ошибок, очистите кэш с помощью команды npm run clear-cache или полностью удалите и заново установите node_modules.

Сложности интеграции

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

Полезные материалы

1. Babel — Путь к мастерству Babel.
2. babel-loader | webpack — Всё, что нужно знать о babel-loader.
3. Configure Babel · Babel — Руководство по настройке Babel.
4. Введение в JSX – React — Процесс обработки JSX Babel'ом.
5. Самые свежие вопросы, касающиеся 'babel-loader', на Stack Overflow — Реальные случаи использования babel-loader.
6. javascript – JSX запрещен в файлах с расширением '.js' для eslint-config-airbnb – Stack Overflow — Почему использование JSX в файлах с расширением .js является плохой практикой.
7. @babel/plugin-transform-react-jsx · Babel — Процесс преобразования JSX через Babel.