problems with Vite, ordering of import statements

[Adam Shaw]

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: fullcalendar/fullcalendar#6371

[P Ξ D R O L U Z]

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 🙇

[P Ξ D R O L U Z]

That really should be in the docs... somewhere... with huge spotlights and arrows pointing to it.

[Adriaan Marain]

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

[GeleMaker]

This is working for
import dayGridPlugin from '@fullcalendar/daygrid'
but not for
import timeGridPlugin from '@fullcalendar/timegrid'

EDIT
Working after npm update ...

[Kyaris]

import '@fullcalendar/react/dist/vdom';

OMG.. im now

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

Oh, you have just become my best friend, I had tried everything for that error and here is the solution, thank you very much!

[Amine El Ghazali]

I'm Trying to implement FullCalendar into my Nuxt3 project, But I keep getting an error that says : vite_ssr_import_1 is not defined

Please help guys ^^'

[Ihsan Fajar Ramadhan]

I just met this issue in vite react, and I just want to add that you can import the @fullcalendar/react/dist/vdom in app level or index level. What I mean by that is that you don't need to import it in every file that import @fullcalendar, so you just need to import @fullcalendar/react/dist/vdom once in your highest level file.

[Erick Fares]

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

You saved me!! ty

[Renato Azevedo]

For some unknown reason, if I import fullcalencar/vue3 in my vue3 + vite + typescript project, all the components becomes red on visual studio with the following error : "any component name" cannot be used as a JSX component. / JSX element class does not support attributes because it does not have a 'props' property / It complains many other things to. I know for sure it is related to importing vuecalendar3. How can I fix this ? regards.

[hkc512]

For some unknown reason, if I import fullcalencar/vue3 in my vue3 + vite + typescript project, all the components becomes red on visual studio with the following error : "any component name" cannot be used as a JSX component. / JSX element class does not support attributes because it does not have a 'props' property / It complains many other things to. I know for sure it is related to importing vuecalendar3. How can I fix this ? regards.

Hi,you have the solution? i having this error after import fullcalendar too.

[Suryadeep Pal]

For some unknown reason, if I import fullcalencar/vue3 in my vue3 + vite + typescript project, all the components becomes red on visual studio with the following error : "any component name" cannot be used as a JSX component. / JSX element class does not support attributes because it does not have a 'props' property / It complains many other things to. I know for sure it is related to importing vuecalendar3. How can I fix this ? regards.

Anything to solve this? I have the exact same issue!

[Dami]

For some unknown reason, if I import fullcalencar/vue3 in my vue3 + vite + typescript project, all the components becomes red on visual studio with the following error : "any component name" cannot be used as a JSX component. / JSX element class does not support attributes because it does not have a 'props' property / It complains many other things to. I know for sure it is related to importing vuecalendar3. How can I fix this ? regards.

Anything to solve this? I have the exact same issue!

@techpool follow the suggestions on the thread and you are good to do.

[Steve-madlad]

To get the FullCalendar Vue plugin working with Vite's HMR, you'll need to import @fullcalendar/core/vdom

You are a life saver man! been racking my brain for solutions.

[Adam Shaw]

Fixed in v6.0.0. A workaround is no longer needed.

[Jairo Abreu]

I'm using the library in Vue version 2.7 + Vite. How can I make this work?

[Subash]

@jairo-ab
Just import this on main.js file import '@fullcalendar/core/vdom' on the top level

It works as expected!

[Gustavo Marques]

I am still getting this error on 6.1.10 and i cant use @AdrianMrn solution because this file does not exist anymore

[Kethaka Ranasinghe]

Thanks bro. It saves my day