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

Ошибка "'React' refers to a UMD global, but the current file is a module" возникает из-за несовместимости между версиями React и TypeScript. Начиная с React 17, был представлен новый JSX transform, который не требует явного импорта React в каждом файле, где используется JSX. TypeScript 4.1+ поддерживает этот новый режим через настройку "jsx": "react-jsx" в tsconfig.json.

Проблема в том, что ваш проект использует "jsx": "react-jsx" (это видно в tsconfig.json), но при этом вы всё ещё пытаетесь импортировать React с помощью import React from 'react'. TypeScript видит, что файл является модулем (из-за наличия импорта), но также обнаруживает, что React определён как UMD-глобал в типизации, что создаёт конфликт.

Решение 1: Удалите ненужный импорт React (рекомендуется)

Поскольку вы используете новый JSX transform, импорт React не требуется. Просто удалите строку import React from 'react' из вашего файла. Компоненты будут работать корректно, так как JSX будет автоматически преобразован компилятором.

// App.tsx
import ReactDOM from 'react-dom';

const App: React.FC = () => {
  return <h1>Hello World</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

Решение 2: Вернитесь к старому JSX transform

Если по какой-то причине вам нужно сохранить явный импорт React (например, для использования хуков, которые не являются частью React 17+), измените настройку "jsx" в tsconfig.json на "react":

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react" // вместо "react-jsx"
  }
}

После этого импорт React будет работать как раньше. Однако этот подход считается устаревшим, и рекомендуется переходить на новый JSX transform.

Решение 3: Используйте правильный тип импорта

Если вы используете React 17+ и TypeScript 4.1+, но по какой-то причине не можете удалить импорт, попробуйте изменить его на:

import * as React from 'react';

Этот синтаксис импорта всех экспортов модуля как пространства имён лучше совместим с UMD-глобалом. Однако это всё равно не рекомендуется, так как новый JSX transform делает этот импорт избыточным.

Дополнительные рекомендации

• Убедитесь, что у вас установлены актуальные версии @types/react и @types/react-dom (17.0.0 или выше)
• Проверьте, что в вашем проекте нет старого tsconfig.json, который может конфликтовать с настройками
• Если вы используете create-react-app, просто удалите импорт React — CRA уже настроен на новый JSX transform

После любого из этих решений ошибка должна исчезнуть. Лично рекомендую первый вариант как наиболее современный и соответствующий текущим стандартам React.

// .eslintrc.json
{
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-uses-react": "off"
  }
}

{
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}