Error occurs in the module @event-calendar/day-grid/src/Header.svelte line 11

[vkurko]

@vkurko This error only occurs if I set a function (i.e. the one from my previous comment) to the theme variable and not when I set a static dictionary. So there is no way that I am passing the incorrect object. ;) The weekdays field does get properly set in the theme variable that is passed to the function and so does everything else (compared it to the default by console logging). From the debug output I can see that the error occurs in the module @event-calendar/day-grid/src/Header.svelte line 11, right here:

import {
	SvelteComponentDev,
	action_destroyer,
	add_location,
	append_hydration_dev,
	attr_dev,
	children,
	claim_element,
	claim_space,
	component_subscribe, // <<= Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
	destroy_each,
	detach_dev,
	dispatch_dev,
	element,
	ensure_array_like_dev,
	init,
	insert_hydration_dev,
	is_function,
	noop,
	safe_not_equal,
	space,
	validate_slots,
	validate_store
} from "/node_modules/.vite/deps/svelte_internal.js?v=3021394d";

...

// The above error points to an issue somewhere here, however there does not seem to be any more debug info
function instance($$self, $$props, $$invalidate) {
	let $theme;
	let $_days;
	let $_intlDayHeader;
	let { $$slots: slots = {}, $$scope } = $$props;
	validate_slots('Header', slots, []);
	let { theme, _intlDayHeader, _days } = getContext('state');
	validate_store(theme, 'theme');

        // The error "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')" seems to point at this line
	component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
	validate_store(_intlDayHeader, '_intlDayHeader');
	component_subscribe($$self, _intlDayHeader, value => $$invalidate(2, $_intlDayHeader = value));
	validate_store(_days, '_days');
	component_subscribe($$self, _days, value => $$invalidate(1, $_days = value));
	const writable_props = [];

	Object.keys($$props).forEach(key => {
		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Header> was created with unknown prop '${key}'`);
	});

	$$self.$capture_state = () => ({
		getContext,
		setContent,
		theme,
		_intlDayHeader,
		_days,
		$theme,
		$_days,
		$_intlDayHeader
	});

	$$self.$inject_state = $$props => {
		if ('theme' in $$props) $$invalidate(3, theme = $$props.theme);
		if ('_intlDayHeader' in $$props) $$invalidate(4, _intlDayHeader = $$props._intlDayHeader);
		if ('_days' in $$props) $$invalidate(5, _days = $$props._days);
	};

	if ($$props && "$$inject" in $$props) {
		$$self.$inject_state($$props.$$inject);
	}

	return [$theme, $_days, $_intlDayHeader, theme, _intlDayHeader, _days];
}

Header.svelte:11 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
    at Object.hydrate [as h] (Header.svelte:11:46)
    at Object.create [as c] (stores.js:23:1)
    at Object.create [as c] (Header.svelte:10:15)
    at create_component (Component.js:33:17)
    at Object.create [as c] (View.svelte:29:7)
    at create_component (Component.js:33:17)
    at Object.create [as c] (Calendar.svelte:137:44)
    at create_component (Component.js:33:17)
    at Object.create [as c] (+page.svelte:126:34)
    at Object.create [as c] (Content.svelte:4:43)

Could it be that you are not properly unsubscribing from a store on destroying a component? I am just handwaving here, since I am not familiar with your code base but the issue is definitely related to stores, funnily enough only if theme is set to a function though.

Originally posted by @LeonHeidelbach in #155 (comment)

[vkurko]

@LeonHeidelbach This issue should be fixed in v2.3.1. Please check.

[LeonHeidelbach]

@vkurko I can confirm that the error now no longer occurs. However, with the updated version the same issue as in v.2.2.0 arises. On the initial page load everything renders correctly but after even a hotreload of the page when using vite dev, on changing an unrelated thing like adding a random comment, the calendar classes all seem to dissapear. For some reason almost all fields that hold the calendar's class lists are now undefined. I am still using only this function to alter the theme:

theme: (theme: CalendarThemeOptions) => {
	theme.button = `ec-button dark:!bg-gray-800 dark:!text-white dark:hover:!bg-gray-700
		            hover:cursor-pointer`;
	theme.icon = 'ec-icon dark:after:!border-white';
	theme.today = 'ec-today dark:!bg-gray-600 dark:!text-white';
	return theme;
},

As you can see on the screenshot below, weirdly enough a couple of classes seem to still be available. Note, that even though I change the theme.today value in the function above, the only class on the today node is ec-today. Something that does not contain most of the needed fields seems to override the theme object when looping through the object keys.

[vkurko]

Oh that SvelteKit! 🙃 I'll look into this.

[vkurko]

@LeonHeidelbach Ok, there is v2.3.2. Lots of changes in hopes of fixing the problem. Please check.

[LeonHeidelbach]

@vkurko Yes, this now finally does the trick. Thank you for your efforts! 👍

[vkurko]

Great! 😄