Josh•4mo ago

Issues importing FullCalendar

Hi, I'm fairly new to Fresh/React/Preact. I'm trying to import FullCalendar into my project. This is my implementation:

import "@fullcalendar/core";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export default function Calendar() {
    return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
    />
    );
}

import "@fullcalendar/core";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export default function Calendar() {
    return (
    <FullCalendar
      plugins={[ dayGridPlugin ]}
      initialView="dayGridMonth"
    />
    );
}

and here are my imports:

"react": "https://esm.sh/preact@10.19.6/compat",
    "react-dom": "https://esm.sh/preact@10.19.6/compat",
    "react-dom/": "https://esm.sh/preact@10.19.6/compat/",
    "react/jsx-runtime": "https://esm.sh/preact@10.19.6/jsx-runtime",
    "@types/react": "https://esm.sh/preact@10.19.6/compat",
    "@fullcalendar/core": "https://esm.sh/@fullcalendar/core@6.1.14?external=preact&target=es2022",
    "@fullcalendar/daygrid": "https://esm.sh/@fullcalendar/daygrid@6.1.14?external=preact,@types/react,react,react-dom&target=es2022",
    "@fullcalendar/react": "https://esm.sh/@fullcalendar/react@6.1.14?external=preact,@types/react,react,react-dom&target=es2022"

"react": "https://esm.sh/preact@10.19.6/compat",
    "react-dom": "https://esm.sh/preact@10.19.6/compat",
    "react-dom/": "https://esm.sh/preact@10.19.6/compat/",
    "react/jsx-runtime": "https://esm.sh/preact@10.19.6/jsx-runtime",
    "@types/react": "https://esm.sh/preact@10.19.6/compat",
    "@fullcalendar/core": "https://esm.sh/@fullcalendar/core@6.1.14?external=preact&target=es2022",
    "@fullcalendar/daygrid": "https://esm.sh/@fullcalendar/daygrid@6.1.14?external=preact,@types/react,react,react-dom&target=es2022",
    "@fullcalendar/react": "https://esm.sh/@fullcalendar/react@6.1.14?external=preact,@types/react,react,react-dom&target=es2022"

I get this error:

core.mjs:2 Uncaught (in promise) TypeError: Class constructor Q7 cannot be invoked without 'new'
    at oe4.render (core.mjs:2:43284)
    at O4 (preact.mjs:2:6231)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at ue4 (preact.mjs:2:7839)

core.mjs:2 Uncaught (in promise) TypeError: Class constructor Q7 cannot be invoked without 'new'
    at oe4.render (core.mjs:2:43284)
    at O4 (preact.mjs:2:6231)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at O4 (preact.mjs:2:6615)
    at Q2 (preact.mjs:2:3517)
    at ue4 (preact.mjs:2:7839)

Assistance would be awesome!

4 Replies

Deno AI Helper•4mo ago

I apologize, but I wasn't able to find the answer to your question in the official Deno documentation. However, based on the information you've provided in your message, I can offer some general advice. The error message you're encountering suggests that there might be an issue with class constructors and the use of the new keyword. This could potentially be related to the way the modules are being transpiled or bundled, or it could be a compatibility issue between the libraries you're using. Since this advice is not based on the Deno documentation, please double-check the accuracy of the advice given. It might be helpful to look into the following: 1. Ensure that the versions of FullCalendar and its plugins are compatible with each other. 2. Verify that the way you're importing the FullCalendar and its plugins aligns with the expected usage in a Preact environment. 3. Check if there are any known issues with using FullCalendar in a Preact project, as Preact compatibility might require specific configurations. If you continue to experience difficulties, you may want to consider reaching out to the FullCalendar community or looking for examples of FullCalendar being used in Preact projects for further guidance.

Helpful Links: Configuring JSX in Deno ECMAScript Modules in Deno Types and Type Declarations | Deno Docs Program Lifecycle

Adamgreg•4mo ago

Hi @Josh I don't think you have a problem with your react-preact aliasing (now). I've tried those URLs you're using with deno info, and it only picks up Preact your import map is fine, and I can reproduce your problem. Interestingly, FullCalendar apparently uses Preact internally, but there seems to be no way of using it without the compatibility layer

Josh•4mo ago

@Adamgreg Yeah I have no idea! I'll probably return to using a CDN and rendering it client-side

Adamgreg•4mo ago

I guess you could also create it in the non-React new Calendar(...).render() way, in a useEffect hook of an island component. I think using its React connector probably only buys you rerendering if its props change (and perhaps they won't?) Then in your component body you could put some placeholder that will be server-side rendered and shown until FullCalendar runs on the client It doesn't look like FullCalendar really supports SSR anyway