Не удается использовать JSX, если не указан флаг '--jsx'

Ошибка "Cannot use JSX unless the '--jsx' flag is provided" возникает, потому что TypeScript не знает, как обрабатывать синтаксис JSX. Чтобы решить эту проблему, вам нужно убедиться, что в вашем файле tsconfig.json установлен флаг jsx.

Например, добавьте или измените свойство jsx следующим образом:

{
  "compilerOptions": {
    "jsx": "react" // или "react-jsx" для React 17 и выше
  }
}

После внесения изменений в tsconfig.json, перезапустите вашу IDE. Иногда изменения в tsconfig.json не применяются мгновенно, и перезапуск может помочь.

Для тех, кто читает, откройте файл tsconfig.json и измените строку с react-jsx на react:

{
  "compilerOptions": {
    "jsx": "react" // или "react-native"
  }
}

Бонус: попробуйте также установить последнюю версию TypeScript в вашей IDE (на данный момент 4.2). В VSCode используйте сочетание клавиш CMD + SHIFT + P и измените её оттуда.

Проблема, с которой вы столкнулись при использовании create-react-app, связана с настройками вашего tsconfig.json. На момент мая 2022 года, в этом файле параметр include был установлен только на "/src". Чтобы исправить это, вам нужно изменить его на более точное значение, которое будет включать все файлы TypeScript в вашей директории src.

Замените текущую конфигурацию включения на следующую:

"include": [
  "./src/**/*.ts"
]

Это позволит включить все файлы с расширением .ts в папке src и её подкаталогах. Если ваше приложение также использует файлы с расширением .tsx, вы можете добавить их в массив include следующим образом:

"include": [
  "./src/**/*.ts",
  "./src/**/*.tsx"
]

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

Проблема с использованием "jsx": "react" в jsconfig.json или tsconfig.json может быть связана с несколькими факторами. Если этот параметр не сработал для вас, но "jsx": "preserve" сработал, это может означать, что ваш проект не полностью настроен для обработки JSX с использованием React.

Вот некоторые моменты, которые стоит проверить:

1. Версия TypeScript: Убедитесь, что вы используете актуальную версию TypeScript, так как поддержку разных типов JSX могли добавить или улучшить в последних релизах.

2. Конфигурация Babel: Если вы используете Babel для транспиляции вашего кода, убедитесь, что установлен правильный плагин для работы с JSX.

3. Настройки окружения: Убедитесь, что ваш редактор кода или среда сборки правильно обрабатывают jsconfig.json или tsconfig.json. Иногда IDE может игнорировать настройки, если они не правильно расположены.

Вот пример вашего jsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

С параметром "jsx": "preserve" TypeScript просто оставляет синтаксис JSX без изменений, что может быть подходящим решением, если вы хотите обработать JSX позже на этапе сборки с помощью других инструментов (например, Webpack).

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

Этот ответ касается VS Code и конкретной ошибки, которая может возникать в этом IDE. (Кто-то может найти это полезным)

Если вы используете такие инструменты, как Webpack или что-то подобное, вы все равно можете столкнуться с этой ошибкой, даже если в вашем файле tsconfig установлен параметр компилятора jsx на React.

Решение есть. Проблема в том, что в VS Code встроена автоматическая детекция для tsc.

Чтобы избавиться от ошибки в редакторе, вы можете добавить в настройки пользователя следующее:

{
    "typescript.tsc.autoDetect": "off"
}

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

Примечание: делайте это только в том случае, если ошибка сохраняется в VS Code. Чтобы убедиться, что это поведение сохраняется, перезагрузите окна и перезапустите редактор после изменения файла tsconfig.json.