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