Solving "Please import the top-level fullcalendar lib before attempting to import a plugin."
See original GitHub issueThis 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.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:11
- Comments:9 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@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';🎉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.