Причина ошибки и её решение

Ошибка "Cannot use JSX unless the '--jsx' flag is provided" возникает, когда TypeScript-компилятор (tsc) не знает, как обрабатывать JSX-синтаксис в файлах с расширением .tsx. По умолчанию TypeScript не поддерживает JSX — эту возможность нужно явно включить.

В проектах, созданных через create-react-app, конфигурация уже настроена, поэтому npm start работает. Но при ручном запуске tsc вы используете настройки из tsconfig.json, которые могут быть неполными или отсутствовать.

Пошаговое решение

1. Откройте файл tsconfig.json в корне вашего проекта. Если его нет — создайте.
2. Добавьте (или измените) опцию "jsx" в секции compilerOptions:

{
  "compilerOptions": {
    "jsx": "react-jsx",    // для React 17+ (автоматический импорт)
    // или "jsx": "react"   // для React 16 и ниже (нужен явный import React)
  }
}

Объяснение значений jsx:

• "react" — преобразует JSX в вызовы React.createElement. Требует явного импорта React в каждом файле: import React from 'react'.
• "react-jsx" — использует новый JSX-трансформер (React 17+). Не требует явного импорта React.
• "preserve" — оставляет JSX как есть (для дальнейшей обработки Babel).

Полный пример корректного tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

Почему create-react-app работает без этой настройки?

Create-react-app использует Babel для компиляции JSX, а TypeScript — только для проверки типов. Поэтому npm start работает даже с неполным tsconfig.json. Но если вы хотите компилировать проект через tsc (например, для сборки), нужно настроить "jsx" явно.

Дополнительные советы:

• Убедитесь, что файлы с JSX имеют расширение .tsx, а не .ts.
• Если используете React 16 или ниже, добавьте "jsx": "react" и не забывайте импортировать React.
• Проверьте версию TypeScript: npx tsc --version. Для "react-jsx" нужен TypeScript 4.1+.

После изменения tsconfig.json запустите tsc снова — ошибка должна исчезнуть.

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

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

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