Tenía este código antes y funcionó bien (solo se muestran las importaciones aquí):
import { Calendar } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid';Pensé que podía cargarlos dinámicamente, pero no creo que lo esté haciendo bien. Cambié a esto:
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); Mi calendario no se carga, el mensaje de error es: Cannot read properties of undefined (reading 'length') y apunta a la fila let calendar = new Calendar .
Este funcionó para mí al final:
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(); })(); }La import dayGridPlugin from … es una importación predeterminada. Así que tendrás que usar
.then(([{Calendar}, {default: dayGridPlugin}]) => { const calendar = new Calendar(document.getElementById('fullcalendar'), { plugins: [dayGridPlugin] }); calendar.render(); })