动态导入FullCalendar多模块失败：Cannot read properties of undefined报错

问题重现 #

静态导入方式下FullCalendar可正常运行：

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

改为动态导入后日历无法加载，代码如下：

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

报错信息：Cannot read properties of undefined (reading 'length')，报错指向let calendar = new Calendar这一行。

问题原因 #

动态导入ES模块时，默认导出不会自动解析，需要通过模块对象的.default属性获取。静态导入时import dayGridPlugin from '@fullcalendar/daygrid'是语法糖，自动帮你取到了默认导出，但动态导入返回的是完整模块对象，直接把它当成插件传入会导致FullCalendar内部处理插件时出错。

解决方案 #

修改动态导入后的解构逻辑，显式获取dayGridPlugin的默认导出：

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

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

或者换一种更直观的写法：

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

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

这样就能正确获取到插件的默认导出，日历也能正常渲染了。

内容的提问来源于stack exchange，提问作者levipadre