Динамический импорт компонента с именованным экспортом

Проблема возникает из-за того, что функция lazy() ожидает, что импортированный модуль экспортирует компонент по умолчанию (export default), а ваш компонент MainScreen экспортируется именованно (export {MainScreen}).

Решение

Используйте один из следующих подходов:

1. Переназначение экспорта в компоненте

Добавьте экспорт по умолчанию в файл screens/index.js:

export {MainScreen} from './ui/MainScreen';
export default MainScreen;

Теперь импорт будет работать стандартным образом:

const LazyMainScreen = lazy(() => import('screens'));

2. Оборачивание в Promise с правильным типом

Если менять экспорт нельзя, используйте такой вариант:

const LazyMainScreen = lazy(() =>
  import('screens').then(module => ({
    default: module.MainScreen as React.ComponentType
  }))
);

Здесь React.ComponentType - это встроенный тип из библиотеки @types/react. Укажите его в явном виде или определите как typeof module.MainScreen.

Важные замечания

Убедитесь, что в tsconfig.json настроены правильные пути для модулей (например, "paths": { "screens": ["src/screens/index"] })
Для корректной работы React.lazy требуется поддержка динамического импорта (Webpack, Vite и т.п.)
Тип React.ComponentType доступен из @types/react (убедитесь, что он установлен)

Пример полной конфигурации tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "target": "esnext",
    "jsx": "react-jsx",
    "strict": true,
    "paths": {
      "screens": ["./src/screens/index"]
    }
  }
}

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