Dynamic import with multiple modules

Question

I had this code before and it worked fine (just showing the imports here):

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

I thought I can load them dynamically, but I don't think I'm doing right. I changed to this:

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

if(calendarEl) {
    Promise.all([
        import(/* webpackChunkName: 'fullcalendar-core' */ '@fullcalendar/core'),
        import(/* webpackChunkName: 'fullcalendar-daygrid' */ '@fullcalendar/daygrid')
    ])
    .then(([{Calendar}, dayGridPlugin]) => {
        let calendar = new Calendar(document.getElementById('fullcalendar'), {
            plugins: [dayGridPlugin]
        });
    
        calendar.render();    
    })
    .catch(console.warn);

My calendar doesn't load, the error message is: Cannot read properties of undefined (reading 'length') and it points to the let calendar = new Calendar row.

Answer 1

The import dayGridPlugin from … declaration is a default import. So you'll need to use

.then(([{Calendar}, {default: dayGridPlugin}]) => {
    const calendar = new Calendar(document.getElementById('fullcalendar'), {
        plugins: [dayGridPlugin]
    });
    calendar.render();    
})