FullCalendar 动态导入答案

【问题标题】：FullCalendar Dynamic ImportFullCalendar 动态导入
【发布时间】：2022-07-24 23:36:12
【问题描述】：

我正在尝试动态导入完整日历以仅在需要时加载它并具有以下内容：

    (async () => {
        console.log('Hello 0');
        const Calendar = await import('@fullcalendar/core');
        console.log('Hello 1');
        const { default: dayGridPlugin } = await import('@fullcalendar/daygrid');
        console.log('Hello 2');

        let calendarEl = document.getElementById('calendar')

        let calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin]
        });
    })();

我不明白为什么会失败。我只是收到以下错误：

vdom.js:3 Uncaught (in promise) 错误：请导入顶层尝试导入插件之前的完整日历库。

同时输出“Hello 0”，但不输出任何其他控制台日志。

我希望加载核心库，然后加载 daygrid 插件，但看起来插件实际上是先加载的，因此错误中出现警告。第 3 行旁边的 await 调用不是为了确保这一点。在继续之前，核心库已完全导入？

为什么没有发生？

有什么建议吗？

【问题讨论】：

您找到解决方案了吗？我也有同样的问题。
@levipadre 我并不讨厌。我刚刚回到静态导入，效果很好。如果您找到解决方案，请告诉我。谢谢！
感谢您的回答。我正在尝试这种方式stackoverflow.com/questions/73083051/…，但还没有运气。

标签： javascript fullcalendar

【解决方案1】：

修改了您的代码。这个对我有用：

let calendarEl = document.getElementById('fullcalendar');

if(calendarEl) {
    (async () => {
        const {Calendar} = await import('@fullcalendar/core');
        const {default: dayGridPlugin} = await import('@fullcalendar/daygrid');

        let calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin],
            initialView: 'dayGridMonth'
        });
        
        calendar.render();
    })();
}

【讨论】：