FullCalendar is broken with SvelteKit #804
Comments
|
PR to fix the warning: #806 The error is a different issue |
|
@benmccann The error in question is From what I understand, the issue is that the underlying it should be |
|
I'll look at it later today, thanks for reporting! |
|
I'm also getting hit with TheophileMot's fix doesn't seem to work either, that gives me: |
|
@Snukii My implementation is working well now. What if you try this? |
Hmm... it's mostly working, anyway. I thought everything was fine, but now I sometimes get Edit: I think the error message just occurs when it's recompiling (e.g., when switching branches in Git), so everything's working fine at the moment. |
|
I've found that... import '@fullcalendar/core/vdom'...helped me as per fullcalendar/fullcalendar-vue#152 and Vue example on https://fullcalendar.io/docs/vue |
|
didn't notice in the docs, thanks! anyway, we already do it inside the component code, so i'm not sure if this would make a difference. |
|
@TheophileMot |
|
Was seeing same error as OP on SvelteKit beta 301 and scratching my head as to why the kit example in this repo was working but not the NPM module. Then I saw there's a tagged release for Note no changes were required to vite config in |
|
very weird, i tried using the experimental package in a blank project but I didn't get it to work 🤦 |
|
Adding If I have a chance later I'll circle back with an example but as it stands the |
|
@vhscom |
|
I'd like to point out I'm also able to get the calendar to display without using dynamic imports (in other words, no need to use kit: {
adapter: adapter(),
vite: {
resolve: {
dedupe: ['@fullcalendar/common']
},
optimizeDeps: {
include: ['@fullcalendar/common']
}
}
}I believe @TheophileMot may be interested in that. ☝️ And, perhaps @Masatoshi could help get you across the finish line for a v2 release as they seem to have some experience handling bundler peculiarities. Finally, I think working but not perfect v2-beta (also mentioned in the readme) is better than a not working NPM module out of the box experience, especially since SvelteKit is gaining a lot of momentum. Just my two cents. Regardless, you're doing a great job. Thanks for putting this together. |
|
Hey, y'all 👋 Great thanks to @vhscom for finding a way to get FullCalendar work in SvelteKit (the example also got updated) 🎉 |
|
Tested 2.0.0-beta.0 with success. Regarding the instructions I wanted to mention you could combine the following: import type { CalendarOptions } from 'svelte-fullcalendar';
import FullCalendar from 'svelte-fullcalendar';Can be reduced to: import FullCalendar, { type CalendarOptions } from 'svelte-fullcalendar';If you wanted. And it would be nice to see spaces instead of tabs the the |
|
@vhscom And I think I'll wait a month or so before closing this issue and releasing a stable version. |
|
Hey all, what's the status of this? I just tried using this package with a fresh install of SvelteKit (v1.0.0-next.343) and I'm getting the following error: It was, seemingly, working once, and then, after installing another package, it broke again. I uninstalled that package and I'm still getting this error. |
|
Hey @WeAreELIC 👋 thanks for using the package! |
|
@YogliB — Yes, I followed the README on the |
|
@WeAreELIC |
|
If it helps Yogev, I've found the following workflow useful for managing kit updates:
Considering you have Cypress installed perhaps it can be configured to kick off a test once run a day to check for errors with the latest SK. That ought to signal the need for an example update for those looking into the lib. |
|
Hi @YogliB, However it is non reactive.. therefore I instantiate the FullCalendar component using <svelte:component this={FullCalendar} {...options}> however this doesn't work. |
|
Any update on this? Thanks |
|
@ondrejrohon |
|
both example & README have been updated, can you give it another try? |
|
Awesome, it seems to be working great now, thanks! |
|
@WeAreELIC |
|
I had the exact same issue with reactivity just like trophix. However, it seems like I managed to do some workaround the issue. TL;DR
Long story Due to mounting sequence, the "rerenderCalendar()" cannot be called inside "onMount", because calendarRef will still be null. By creating the timer, we can avoid calendarRef null issue, and even if the timer expires after the page has been resized, the the component will adapt to the new size. And the true magic is that after doing this once, the entire component becomes fully reactive. I honestly do not know why. My config is the following: SvelteKit: 1.0.0-next.515 vite.config.ts: FullCalendar import: FullCalendar options:
One last thing to note is that I did not build the project, all my experiences coming form dev. Cheers |
It happens again at @sveltejs/kit@1.0.0-next.567. According to problems with Vite, ordering of import statements #152 and Cannot use import statement outside a module #4504, it can be fixed by
// vite.config.js
const config = {
...
ssr: {
noExternal: ['@fullcalendar/core']
}
};
// Component.svelte
<script>
import '@fullcalendar/core/vdom';
import FullCalendar, { type CalendarOptions } from 'svelte-fullcalendar';
...
</script>
|
|
hey @benlau6 👋 |
Sure, will make it later today |
You should not have to do this. It's a sign that something else is wrong. In this case, it looks like the packaging could be updated a bit: fullcalendar/fullcalendar#7038 |
How about keeping By just adding the following line, it fixes the issue. But it will lead to // Component.svelte
<script>
import '@fullcalendar/core/vdom.cjs';
import FullCalendar, { type CalendarOptions } from 'svelte-fullcalendar';
...
</script>
// FullCalendar.svelte from svelte-fullcalendar
import { Calendar } from '@fullcalendar/core
...// Calendar.svelte from @fullcalendar/core
import './vdom'
...By the way, according to jochemvogel at #928 (comment), it works by just adding the // FullCalendar.svelte from svelte-fullcalendar
import '@fullcalendar/core/vdom.cjs';
import { Calendar } from '@fullcalendar/core
...But I'm not sure what is |
|
That's a terrible solution, honestly. CJS should never be used in the browser
That imports the ESM version, which is a much better solution if you must manually specify a version like this. But really the fullcalendar package should just define |
|
Here how I solved this issue. Import @fullcalendar/core/vdom just before you import svelte-fullcalendar and other fullcalendar plugins. Like this: I am using the beta version of svelte-fullcalendar which is 2.0.0-beta.0 along with vite-4.0.1 |
|
I'm running into |
Downgrading all the |
|
If I use |
|
Got it working thanks to this thread. Thank you !! <FullCalendar {options} /> -- Package.json -- vite.config const config: UserConfig = { |
|
I can see that multiple people managed to solve this problem. // package.json
// ...
"dependencies": {
"svelte": "^3.55.0",
"vite": "^4.0.4"
},
"devDependencies": {
"svelte-fullcalendar": "^2.0.0-beta.0",
"@fullcalendar/common": "^5",
"@fullcalendar/core": "^5",
"@fullcalendar/daygrid": "^5",
"@fullcalendar/resource-timeline": "^5",
}// vite.config.js
const config = {
plugins: [sveltekit()],
define: {
'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
},
resolve: {
dedupe: ['@fullcalendar/common']
},
optimizeDeps: {
include: ['@fullcalendar/common']
},
target: '#svelte',
};
export default config;// MyCalendar.svelte
<script lang="ts">
import '@fullcalendar/core/vdom';
/**
** Bunch of other imports in between, but my guess thats not the problem
**/
import daygridPlugin from '@fullcalendar/daygrid';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import FullCalendar from 'svelte-fullcalendar';
let options = { /* it doesn't matter in this context*/ }
</script>The error I get on built version (not dev) is the following: I tried every workaround mentioned above with no success :( Any idea how to resolve this issue? |
|
@nubcake94 just stop using this library, use the latest fullcalendar instead. The fullcalendar team fixed the vdom problem. // package.json
...
"dependencies": {
"@fullcalendar/common": "5.11.4",
"@fullcalendar/core": "^6.1.4",
"@fullcalendar/timegrid": "^6.1.4",
...// vite.config.js
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite'
export default defineConfig({
plugins: [sveltekit()]
});// lib/FullCalendar.svelte component
<script lang="ts">
import { onMount } from 'svelte';
import { Calendar } from '@fullcalendar/core';
import type { CalendarOptions } from '@fullcalendar/core';
let classes: string | null = null;
export { classes as class };
export let style: string | null = null;
export let options: CalendarOptions;
export function getAPI() {
return calendar;
}
let calendarEl: HTMLElement;
let calendar: Calendar;
onMount(async () => {
if (!canBeInitiated) return;
initCalendar();
return () => {
calendar && calendar.destroy();
};
});
$: canBeInitiated =
options && options.plugins && options.plugins.length && calendarEl && !calendar;
$: {
if (calendar && options && options.plugins && options.plugins.length) updateCalendarOptions();
if (canBeInitiated) {
initCalendar();
}
}
function initCalendar() {
calendar = new Calendar(calendarEl, options);
calendar.render();
}
function updateCalendarOptions() {
calendar.pauseRendering();
calendar.resetOptions(options);
calendar.resumeRendering();
}
</script>
<div bind:this={calendarEl} class={classes} {style} />Then you can use it with // page.svelte
<script lang="ts">
import FullCalendar from '$lib/FullCalendar.svelte';
let calendarRef
let options = {
// some options
...
}
</script>
<FullCalendar bind:this={calendarRef} {options} /> |
@benlau6 I'm really grateful for your suggestion, it works like a charm. I had so many other problems, like duplicated element appering when dropping external event to list, lagging, etc. It solved all my problems! Thanks 🤛🏻 |
|
Dear @nubcake94 and @benlau6, I am having the problem of the calendar is not rendering and there are no errors in the console at all. I followed all the above that @benlau6 laid out but I think my Is this the way it should look? |
|
Hi - I was also getting frustrated with thsi Full Calender integration. I found a great alternative that is up to date wityh SvelteKit etc. |
|
fullcalendar 5 is horribly broken: https://publint.dev/@fullcalendar/core@5.0.0 This library needs to update its dependency |
|
I look a stab at upgrading fullcalendar, but it didn't work because SvelteKit was on a beta version in this repo, so we need to update that first. I sent a PR for it here: #931 |
|
@benmccann you're PR is merged. |
|
Thank you! I've sent a fix here: #934 |
@YogliB
FullCalendar doesn't work in SvelteKit projects; it gives the following error in the console:
To reproduce, try running the demo in
/examples/kit. I tried changing the SSR settings, both globally (insvelte.config.js) as well as locally (in theindex.sveltefile that loads the calendar) but didn't have any luck.The text was updated successfully, but these errors were encountered: