React Vite compatibility

[pdrvsky]

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. fullcalendar/fullcalendar-vue#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)?

[Maadtin]

In my case even after adding that import it keeps giving me the Please import the top-level fullcalendar lib before attempting to import a plugin. error

Any news on this?

[abdellatifLabr]

Getting the same error.

[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";

[Maadtin]

@abdellatifLabr Still getting the same error :S

[Maadtin]

@abdellatifLabr Bro did you manage to find the solution?

[abdellatifLabr]

@Maadtin the solution that worked for me is the one i posted above

[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)

[benj56]

After spending a few hours on this, I now realize that @jugglingcats already pointed out the difference between the correct import '@fullcalendar/react/dist/vdom'; and the incorrect import '@fullcalendar/core/vdom';.

The latter imports from core-preact, loading preact createRef etc. instead of the React functions, leading to the cryptic errors.

[SnowingFox]

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";

it works well, but why should i have to add this line in my code?

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

if i don't import it, it will give me an error

can u explain it? im curious about it

[benj56]

can u explain it? im curious about it

See fullcalendar/fullcalendar#6371. With Vite, in the dev build, the pre-bundled fullcalendar dependency you import does not have the order fullcalendar expects.

By importing that file manually from the fullcalendar dist folder, it will set the required globals before loading the pre-bundled fullcalendar bundle in your next import.

[SnowingFox]

can u explain it? im curious about it

See fullcalendar/fullcalendar#6371. With Vite, in the dev build, the pre-bundled fullcalendar dependency you import does not have the order fullcalendar expects.

By importing that file manually from the fullcalendar dist folder, it will set the required globals before loading the pre-bundled fullcalendar bundle in your next import.

thanks, an interesting problem

[brittaniSavery]

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";

Not sure if this is a fullcalendar issue or an astro issue, but when I added the import "@fullcalendar/react/dis/vdom"; line, it did remove the import ordering error. However, I'm now getting this error instead.

Cannot use import statement outside a module

C:\...\node_modules\react\dist\vdom.js:1
import * as react from 'react';
^^^^^^

Syntax Error: Cannot use import statement outside a module
         at wrapSafe (internal/modules/cjs/loader.js:979:16)

[dangdn21]

can u explain it? im curious about it

See fullcalendar/fullcalendar#6371. With Vite, in the dev build, the pre-bundled fullcalendar dependency you import does not have the order fullcalendar expects.

By importing that file manually from the fullcalendar dist folder, it will set the required globals before loading the pre-bundled fullcalendar bundle in your next import.

Thank you for answer. But Do you know how to fix order import for fullcalendar in pre-bundled Vite ? I have isssue about it.

[Digital-Coder]

in vite 2.9.x import "@fullcalendar/react/dist/vdom"; solution has been working ,but in vite@3.0.2 I am receiving that react is not defined using fullcallendar in production. Anyone figured it out how to solve it ?

Edit: some potential solutions here

[adrianfabjanski]

in vite 2.9.x import "@fullcalendar/react/dist/vdom"; solution has been working ,but in vite@3.0.2 I am receiving that react is not defined using fullcallendar in production. Anyone figured it out how to solve it ?

Edit: some potential solutions here

Same issue here. React is not defined error occurring in automatic jsxRuntime on production build after upgrading vite.

any plans on fixing it?

[tgiovanella87]

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";

It really Works! Thanks a lot!!! abdellatifLabr

[Srounsroun]

@adrianfabjanski do you use @vitejs/plugin-react ?

import react from '@vitejs/plugin-react'
export default defineConfig({
    plugins: [react()]
})

[tgiovanella87]

Yes I am using React with Vite and my file starts like that:

import React, { useRef } from "react"; import "@fullcalendar/react/dist/vdom"; import "@fullcalendar/core/locales/pt-br"; import FullCalendar from "@fullcalendar/react"; // must go before plugins import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin! import listGridPlugin from "@fullcalendar/list"; import interactionPlugin from "@fullcalendar/interaction"; import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom";

And than, the Component is something like that

<FullCalendar plugins={[dayGridPlugin, listGridPlugin, interactionPlugin]} initialView="dayGridMonth" height={500} locale="pt-br" headerToolbar={{ start: "listWeek,dayGridMonth,today,prev,next", center: "title", end: "prevYear,nextYear", }} dateClick={(e) => handleDateClick(e)} eventClick={(e) => handleEventClick(e)} nowIndicator={true} buttonText={{ today: "Hoje", month: "Mês", week: "Semana", day: "Dia", list: "Lista", }} />

[arshaw]

Fixed in v6.0.0

The vdom import workaround is no longer necessary.

[lccmanuel]

you have right @arshaw in v6 no more is needed, just I remove de line
import "@fullcalendar/react/dist/vdom"
and it worked again :)

[Karan-The-Coder]

DayTableView 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}.

I got this error when I use fullcalendar components.

[TapendraPNGTS]

[plugin:vite:import-analysis] Missing "./dist/vdom" specifier in "@fullcalendar/react" package
same problem