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

This JS error occurs when a FullCalendar plugin, like @fullcalenar/daygrid or @fullcalendar/timeline, is imported before @fullcalendar/core or one of the connector libraries, like React, Vue, or Angular. I will backlink tickets related to each of these three frameworks to this main ticket.

It is obviously not good to have ordering restrictions for an end-developer’s import statements. The goal is to do away with this restriction.

The restriction exists for reasons that are internal to FullCalendar’s rendering code: FullCalendar is designed to work with an abstract component/jsx implementation. Either React or Preact. When FullCalendar’s component classes are being created at the top-level runtime, they need to know what Component class to subclass. Thus, either React or Preact needs to be available at that time.

Version 6 will sidestep this issue by using (p)react hooks for rendering. With hooks, there is no longer the need to subclass a Component class.

[AdrianMrn]

@duckbrain Thanks for pointing me in the right direction! I’m bundling a React application with Vite, so this fix didn’t work for me. However, adding this line does fix it: import '@fullcalendar/react/dist/vdom'; 🎉

[casually-creative]

I am receiving the same error when using snowpack to compile my files. I assume the underlying issue is the same as the one with Vite. When adding import '@fullcalendar/react/dist/vdom'; as AdrianMrn suggested, the issue was fixed.