Undefined error (reading 'update') while importing Interaction plugin

[Luka]

Hi, I get the following error:

TypeError: Cannot read properties of undefined (reading 'update')
    at Object.createStores (/node_modules/@event-calendar/interaction/src/index.js:42:20)
    at new __vite_ssr_exports__.default (/node_modules/@event-calendar/core/src/storage/state.js:61:24)
    at Calendar.svelte:25:13
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at eval (/src/routes/(admin)/salon/calendar/+page.svelte:82:132)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at Object.default (root.svelte:45:42)
    at eval (/src/routes/(admin)/salon/+layout.svelte:51:59)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at Object.default (root.svelte:44:41)

I have all the plugins installed and only when adding the Interaction plugin to plugins variable, I get this error. See below code:

<script>
	import Calendar from '@event-calendar/core';
	import Interaction from '@event-calendar/interaction';
	import DayGrid from '@event-calendar/day-grid';
	import TimeGrid from '@event-calendar/time-grid';

	let plugins = [Interaction, DayGrid, TimeGrid];
	let options = {
		view: 'dayGridMonth',
		events: [
			{
				id: 'event1',
				start: new Date('2023-05-20T10:00:00'),
				end: new Date('2023-05-20T12:00:00'),
				title: 'Meeting',
				backgroundColor: '#FF0000',
				textColor: '#FFFFFF',
				extendedProps: {
					customProperty: 'Custom Value 1'
				}
			},
			{
				id: 'event2',
				start: new Date('2023-05-21T14:00:00'),
				end: new Date('2023-05-21T16:00:00'),
				title: 'Presentation',

				backgroundColor: '#00FF00',
				textColor: '#000000',
				extendedProps: {
					customProperty: 'Custom Value 2'
				}
			},
			{
				id: 'event3',
				start: new Date('2023-05-22T09:00:00'),
				end: new Date('2023-05-22T10:30:00'),
				title: 'Training Session',

				backgroundColor: '#0000FF',
				textColor: '#FFFFFF',
				extendedProps: {
					customProperty: 'Custom Value 3'
				}
			},
			{
				id: 'event4',
				start: new Date('2023-05-23T16:00:00'),
				end: new Date('2023-05-23T18:00:00'),
				title: 'Team Meeting',

				backgroundColor: '#FF8000',
				textColor: '#000000',
				extendedProps: {
					customProperty: 'Custom Value 4'
				}
			},
			{
				id: 'event5',
				start: new Date('2023-05-24T11:00:00'),
				end: new Date('2023-05-24T13:00:00'),
				title: 'Lunch Meeting',
				display: 'auto',
				backgroundColor: '#800080',
				textColor: '#FFFFFF',
				extendedProps: {
					customProperty: 'Custom Value 5'
				}
			}
		]
	};

	function viewToWeek() {
		options.view = 'timeGridWeek';
	}
	function viewToMonth() {
		options.view = 'dayGridMonth';
	}
</script>

<div class="p-2 lg:p-12 pb-32">
	<Calendar {plugins} {options} />

	<button class="p-1 border rounded" on:click={viewToWeek}>Week</button>
	<button class="p-1 border rounded" on:click={viewToMonth}>Maand</button>
</div>

Why is this not working? Thank you for your reply

Luka

[Vladimir]

Hi @dev-Luka Please make sure you are using the latest versions of all @event-calendar packages, in particular the @event-calendar/core package.

[Vladimir]

In theory, starting with version 1.2.0, this situation should become impossible. Please check.

[Luka]

I updated all the packages, and now it works. Thank you for your help!