Как динамически импортировать компонент в lazy?

Question

[historydev]

Есть публичный api компонента screens/index.js:
export {MainScreen} from './ui/MainScreen';

Мне нужно лениво его загрузить.
Добавил в tsconfig: "module": "esnext",

Пытаюсь импортировать динамически и единственный вариант который не возвращает ошибку, вот этот:

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

Но он не работает, сначала я вообще не понимал что ему нужно, во всех примерах:
lazy(() => import('./component));

Он просит вернуть объект {default} где default типа ComponentType, я не понимаю что мне туда нужно передать, пробовал:
typeof module.MainScreen

Не работает, если попытаться тип вызвать ComponentType - такого типа нет, возможно он в каком-то пространстве имён, что-то вроде React.ComponentType.

Что мне нужно сделать?

P.S: Нагуглил что нужен export default, но как быть если в паттерне который я использую для доступа к компонентам используется export, а не export default?

Comments

[WbICHA]

как быть если в паттерне который я использую для доступа к компонентам используется export, а не export default?

Какой ужас. А если ты сделаешь пару исключений в проекте, то тебя распят на ноутбуке?

единственный вариант который не возвращает ошибку, вот этот:

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

[historydev]

WbICHA, В каком например? Единственное что осталось, это компонент, но он тоже экспортируется как:
export const Component = () => ...;

[historydev]

WbICHA, Любое исключение в проекте занимает 1-2 дня, чтобы хорошо и масштабируемо сделать.

[historydev]

WbICHA, А ошибки то и нет, просто не загружается компонент, пустой экран.

[historydev]

WbICHA,

export const Navigation = () => {
    return (
        <NavigationContainer
            onReady={() => {
                SplashScreen.hide();
            }}
            ref={navigationRef}
        >
            <Stack.Navigator
                // screenOptions={{animation: 'none'}}
                initialRouteName="Main"
            >
                <Stack.Screen
                    name="Main"
                    component={LazyMainScreen}
                    options={{headerShown: false}}
                />
                <Stack.Screen
                    name="Chat"
                    component={ChatScreen}
                    options={{headerShown: false}}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

[historydev]

WbICHA, А я понял, ты прав, ошибка в навигаторе, почему-то если initialRoute='Main', не загружается, сменил роут, перешёл на страницу и всё заработало.

Спасибо

[WbICHA]

historydev,

Любое исключение в проекте занимает 1-2 дня, чтобы хорошо и масштабируемо сделать.

Замена именованного экспорта на дефолтный занимает 5 минут со всеми манипуляциями. Что тут можно сделать "лучше" и, тем более, "масштабируемее"?

А ошибки то и нет, просто не загружается компонент, пустой экран.

Воспроизведи в песочнице и дай ссыль.

[historydev]

WbICHA,

Замена именованного экспорта на дефолтный занимает 5 минут со всеми манипуляциями

Здесь он и не нужен оказывается.

Я пробую разное, т.к. лагает этот навигатор, не понимаю почему.
Огромная задержка перед переходом на страницу, с lazy ещё хуже, она выросла, так ещё и suspense придётся добавлять, чтобы белого экрана не было.