Ошибка React в TypeScript: требуется импорт в CRA 4.0

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

import React from 'react';

Если TypeScript выдаёт ошибку, связанную с глобальным объектом UMD, советуем применить стандартный импорт для React. Данный подход соответствует позиции React по работе с модулями и помогает избежать конфликтов в пространстве ES6 модулей.

Декодирование проблемы: TypeScript и JSX

Универсальное решение: TypeScript 4.1+

Ключ к решению проблемы с глобальными объектами UMD TypeScript в React заключается в использовании передовых инструментов. Обновите ваш проект до TypeScript версии 4.1 или новее. Это улучшит производительность и обеспечит поддержку нового JSX Transform, введенного в React 17.

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

Настройка tsconfig.json

Скажем так, файл tsconfig.json – это ваш компас для компилятора TypeScript. Если установить параметр jsx на "react-jsx" или "react-jsxdev", активируется новая обработка JSX, что позволит избежать ошибок в коде.

Временный вариант: импорт React

Если обновление до самой новой версии TypeScript пока что нежизнеспособно, обычный импорт React в файлы .tsx становится рабочей заменой. Этот шаг разрешает недопонимание со стороны компилятора и позволяет использовать React как модуль.

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

Вообразите наш код как библиотеку, где каждый том находится на своей полке:

Том (📚): Модуль с уникальным пространством имён
Глобальная UMD-книга (🌐📖): Универсальное издание, доступное всем

Расположение React в модуле можно сравнить с размещением тома в частном кабинете

📚🔒 ➡️ (🌐❌) 📖: Попытка установить глобальную UMD-книгу в частную коллекцию библиотеки недопустима!
# Модули лучше всего срабатывают с книгами, имеющими отдельные места на полках. Они и глобальные UMD-объекты не могут находиться на одной и той же полке.

Правильное подключение React можно сравнить с выбором подходящего тома

📚🔗 ➡️ (📚✅) 🌐📖: Найдите нужный том и включите его в вашу коллекцию без создания хаоса.
# Правильный импорт React позволяет гармонично интегрировать его в структуру модуля.

Возможные сценарии и решения

Проверка версий React и react-dom

Крайне важно убедиться, что версии React и react-dom вашего проекта соответствуют или превышают 17. Это обеспечит совместимость с новым JSX Transform и избавит от необходимости импортировать React.

Настройка tsconfig.json в соответствии с потребностями проекта

Файл tsconfig.json должен быть настроен в соответствии с требованиями вашего проекта. Правильная конфигурация поможет предотвратить большинство ошибок при разрешении модулей.

Конфигурация Next.js с TypeScript

Для проектов на основе Next.js с поддержкой TypeScript требуется обстоятельная настройка tsconfig.json, чтобы обеспечить бесперебойную работу, особенно в сложных структурах проекта.

Исключения: create-react-app

При использовании create-react-app v4.0 и TypeScript до версии 4.1, обязательно дополнительно импортируйте React в файлы проекта. Это может показаться избыточным, но это — верный способ решить проблему с глобальными UMD-объектами.

Разбор сообщений компилятора

Когда возникает сообщение о том, что "React относится к глобальному объекту UMD...", воспринимайте это как предупреждение от TypeScript. Ошибка указывает на необходимость импорта React в вашем коде, что излишне в новых версиях TypeScript.

Изучение документации TypeScript

Для более глубокого понимания проблемы рекомендуем обратиться к документации TypeScript, версии 4.1 Beta, которая касается JSX Factories в React 17.

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

1. Добавление React в существующий проект – React — подробное руководство по внедрению React в проект.
2. Модули JavaScript – MDN — детальный обзор модулей JavaScript от MDN.
3. Конфигурация | webpack — официальное пособие по настройке React-приложений.
4. Запустите новый проект React – React — инструкции по созданию нового проекта React.
5. Что такое AMD, CommonJS и UMD? – блог Дэвида Кэлхуна — обзор форматов JavaScript-модулей.
6. module.exports против export default в Node.js и ES6 – Stack Overflow — разбор различий экспорта в Node.js и ES6.
7. Настройка Babel · Babel — пошаговая инструкция по настройке Babel для использования современного JavaScript и React.