Проверка Vue, когда загружен асинхронный компонент

Question

Мне интересно, как проверить, загружен ли асинхронный компонент.

Обычно я загружаю свой компонент примерно так:

Vue.component(
     'booking-overlay', 
     () => import('@/components/BookingOverlayAsync.vue')
);

Использование чего-то подобного не работает:

Vue.component(
   'booking-overlay',
    () => import('@/components/BookingOverlayAsync.vue').then(() => {
        console.log('component has loaded');
    })
);

Это приводит к следующей ошибке:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство '__esModule' из неопределенного в sureCtor ..

Компонент больше не загружается, но обещание разрешается.При добавлении then это больше не разрешает само обещание, как кажется.

Как я могу глобально зарегистрировать этот асинхронный компонент, а также проверить, был ли загружен этот блок JavaScript-компонентов?

Очевидно,Я мог бы просто сделать это вместе с настройкой глобального компонента:

import('@/components/BookingOverlayAsync.vue').then(() => {
    console.log('Chunk loaded');
});

Хотя это кажется очень уродливым решением.

Answer 1

Поскольку ваш второй объект обещания, возвращаемый функцией .then, не продолжает передавать асинхронный загруженный компонент самой vue lib.

функция Vue.component ожидает, что second Параметр должен быть функцией, которая возвращает обещание, где разрешенные данные должны быть самим асинхронно загруженным компонентом.

, пожалуйста, попробуйте следующее:

Vue.component(
        'booking-overlay',
        () => import('@/components/BookingOverlayAsync.vue').then(component => {
            console.log('component has loaded');
            return component;
        })
    );