I'm trying to import Full Calendar dynamically to only load it when needed and have the following:

    (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]
        });
    })();

I can't see why this is failing. I just get the following error:

vdom.js:3 Uncaught (in promise) Error: Please import the top-level fullcalendar lib before attempting to import a plugin.

Also the "Hello 0" is output but not any of the other console logs.

I'd expect the core library to load, followed by the daygrid plugin, but it appears like the plugin is actually loading first, hence the warning in the error. Isn't the await call next to line 3 meant to ensure that. the core library is fully imported before moving on?

Why is that not happening?

Any suggestions?