problems with Vite, ordering of import statements

To get the FullCalendar Vue plugin working with Vite’s HMR, you’ll need to import @fullcalendar/core/vdom for its side-effects before any other import. Example from the docs:

import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

This configuration is recommended for other bundlers too, not just Vite, because it guarantees the ordering of import statements that FullCalendar internally needs. It prevents the JS error Please import the top-level fullcalendar lib before attempting to import a plugin.

The goal is to do away with this ordering requirement. See the following issue for more info: https://github.com/fullcalendar/fullcalendar/issues/6371

[AdrianMrn]

For anyone else using Vite to build a React application, you need to add this line instead: import '@fullcalendar/react/dist/vdom';

[Narven]

Man… u are my 🦸‍♂️ today. I’ve just spent 4 hours trying to get vite to work fullcalendar with the issue:

Please import the top-level fullcalendar lib before attempting to import a plugin.

and that:

import '@fullcalendar/core/vdom'

just saved me another day of searching and punching my monitor. (my hands are hurting already)

Thanks 🙇