React Vite compatibility

Hello,

Recently we’ve been researching a possibility to move our project to Vite environment. Of course we failed at the first try just because of the same issue as discussed in the Vue integration section of your repository (i.e. https://github.com/fullcalendar/fullcalendar-vue/issues/152 and related). I’ve tried the solution provided there to import @fullcalendar/core/vdom just before anything else connected to fullcalendar packages but it didn’t work very well for a React project. The error I got was:

The <CalendarDataProvider2 /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change CalendarDataProvider2 to extend React.Component instead.

and:

Uncaught TypeError: Cannot set property 'props' of undefined.

It definitely concerned the imported vdom not being compatible with Reacts vDOM. So I crawled through internal fullcalendar package files and I found @fullcalendar/react/dist/vdom. When replacing the import the project seems to work.

To sum up I would like to ask the project authors if the described solution is a proper way to run a React Fullcalendar project with a Vite build tool? If so, could the docs be updated (or should I prepare a PR to update them)?

[abdellatifLabr]

For everyone who is still getting this error, here is the fix You should put your imports in this order including react vdom

import "@fullcalendar/react/dist/vdom";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

[jugglingcats]

I’m running vite too and @abdellatifLabr’s sequence above worked for me (using /react/dist/vdom). For me using /core/vdom did get rid of the first error about import being in the wrong order but I had the following cryptic warnings/errors…

Warning: CalendarRoot2 defines an invalid contextType. contextType should point to the Context object returned by React.createContext(). However, it is set to an object with keys {__c, __, Consumer, Provider}.
...
Uncaught Error: Expected ref to be a function, a string, an object returned by React.createRef(), or null.
...
The above error occurred in the <CalendarContent2> component

(for benefit of others coming here via google)