Решение ошибки 'jsx' not enabled без create react app

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

Для решения проблемы с синтаксисом 'jsx', Babel необходимо настроить для совместной работы с React:

1. Установите пресеты Babel с помощью такой команды:

   JS

   Скопировать код

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

   Запустить код

2. Создайте файл .babelrc в корневой директории проекта и добавьте в него ранее установленные пресеты:

   JS

   Скопировать код

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

   Запустить код

3. Если вы испольуете webpack, обновите файл webpack.config.js, добавив в него конфигурацию для babel-loader:

   JS

   Скопировать код

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

   Запустить код

   Теперь React сможет работать в вашем JavaScript коде, при условии корректной настройки инструментов для библиотек.

Как проанализировать JSX? Плагины для Babel придут на помощь

Использование плагинов для Babel

Babel требуются специальные плагины для распознавания синтаксиса JSX. Это можно сделать так:

npm install @babel/plugin-syntax-jsx --save-dev

После установки добавьте плагин в раздел plugins файла .babelrc:

{ 
  "plugins": ["@babel/plugin-syntax-jsx"]
}

Таким образом, Babel будет уметь обрабатывать JSX, даже не выполняя его трансформацию.

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

Запуск кода

Собрать проект можно с помощью yarn и WSL следующей командой:

yarn webpack-dev-server --mode development

Это замгновенно запустит локальный сервер для разработки.

Избегайте ведения двух файлов конфигурации

Дайте предпочтение файлу .babelrc перед babel.config.js благодаря его контекстно-зависимым настройкам.

Исключите node_modules из конфигурации webpack — это поможет минимизировать потенциальные конфликты:

{ 
  exclude: /node_modules/ 
}

Во время работы с WSL следите за проблемами с символическими ссылками и всегда используйте абсолютные пути.

Советы от опытного программиста

Проверьте состав

Убедитесь, что все необходимые плагины и пресеты Babel присутствуют в файле package.json. При необходимости, обновляйте их:

yarn upgrade @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx

Все загрузчики на борту

Не забудьте проверить настройки загрузчиков в webpack, чтобы быть уверенными в корректной обработке расширения .jsx:

{ test: /\.jsx?$/, /*...*/ }

Начало работы с Create React App

Чтобы упростить процесс настройки, используйте инструмент Create React App:

npx create-react-app my-app

Данная утилита сразу настроит Babel и webpack для работы.

Используйте силу сообщества

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

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

Представьте, что синтаксис JSX — это часть пазла, который подходит к картине только с правильно настроенным адаптером (Babel):

Ваш текущий пазл:        [🧩🧩??]

С адаптированным JSX:    [🧩🧩🔧🔮🧩]

Отсутствует адаптер:     [🧩🧩🚫🔮🧩]

С поддержкой JSX в Babel код становится совершенставным!

Максимальная продуктивность

Гармоничная среда

Используйте сочетание инструментов yarn и WSL для стабильной и эффективной работы. Yarn обеспечит быстродействие, надежность и безопасность при управлении зависимостями.

Необходимые файлы на своих местах

Проверьте, содержит ли ваша структура файлов все важные элементы: index.html, index.js, package.json, webpack.config.js и .babelrc.

Больше осторожности до коммита

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

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

1. JSX подробно – React — детальное руководство по JSX в React.
2. @babel/plugin-transform-react-jsx · Babel — официальный плагин для трансформации JSX.
3. Добавление пользовательских переменных окружения | Create React App — руководство по добавлению поддержки JSX в Create React App.
4. Книга Fullstack React 🐬 – Полное руководство по ReactJS и друзьям — инструкция по интеграции JSX с webpack.
5. Почти полное руководство по webpack 5 (2020) — как настроить webpack и Babel для работы с React с нуля.
6. Минимизированная ошибка React #321 – React — раскрытие наиболее распространённых ошибок, связанных с JSX и webpack.