Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Svelte 5: Date Range Picker ERR_SVELTE_TOO_MANY_UPDATES #870

Closed
Plorenzo opened this issue Mar 7, 2024 · 4 comments
Closed

Svelte 5: Date Range Picker ERR_SVELTE_TOO_MANY_UPDATES #870

Plorenzo opened this issue Mar 7, 2024 · 4 comments

Comments

@Plorenzo
Copy link

Plorenzo commented Mar 7, 2024

Describe the bug

I do understand that Svelte 5 is still not out but I think will be good to have visibility of what it's not working anyway.

When using Date Range Picker ERR_SVELTE_TOO_MANY_UPDATES is triggered.

Reproduction

+page.svelte 
<script lang="ts">
	import type { DateRange } from 'bits-ui';
	import {
		CalendarDate,
		DateFormatter,
		getLocalTimeZone,
		type DateValue
	} from '@internationalized/date';
	import { cn } from '$lib/utils';
	import { Button } from '$lib/components/ui/button';
	import { RangeCalendar } from '$lib/components/ui/range-calendar';
	import * as Popover from '$lib/components/ui/popover';
	import { IconCalendar } from '@tabler/icons-svelte';

	const df = new DateFormatter('en-US', {
		dateStyle: 'medium'
	});

	let value: DateRange | undefined = {
		start: new CalendarDate(2022, 1, 20),
		end: new CalendarDate(2022, 1, 20).add({ days: 20 })
	};

	let startValue: DateValue | undefined = undefined;
</script>

<div class="grid gap-2">
	<Popover.Root openFocus>
		<Popover.Trigger asChild let:builder>
			<Button
				variant="outline"
				class="{cn(
					'w-[300px] justify-start text-left font-normal',
					!value && 'text-muted-foreground'
				)}"
				builders="{[builder]}"
			>
				<IconCalendar class="mr-2 h-4 w-4" />
				{#if value && value.start}
					{#if value.end}
						{df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
							value.end.toDate(getLocalTimeZone())
						)}
					{:else}
						{df.format(value.start.toDate(getLocalTimeZone()))}
					{/if}
				{:else if startValue}
					{df.format(startValue.toDate(getLocalTimeZone()))}
				{:else}
					Pick a date
				{/if}
			</Button>
		</Popover.Trigger>
		<Popover.Content class="w-auto p-0" align="start">
			<RangeCalendar
				bind:value="{value}"
				bind:startValue="{startValue}"
				placeholder="{value?.start}"
				initialFocus
				numberOfMonths="{2}"
			/>
		</Popover.Content>
	</Popover.Root>
</div>

Logs

Uncaught Error: ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.
    infinite_loop_guard runtime.js:445
    flush_queued_effects runtime.js:463
    flush_local_render_effects runtime.js:593
    pre_effect effects.js:162
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:497
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    mark_signal_consumers runtime.js:899
    mark_signal_consumers runtime.js:899
    set sources.js:148
    set value +page.svelte:166
    prop render.js:2790
    set value range-calendar.svelte:56
    prop render.js:2790
    onValueChange range-calendar.svelte:74
    update overridable.js:9
    update index.js:82
    update overridable.js:5
    set2 overridable.js:16
    createRangeCalendar create.js:846
    destroy effect.js:18
    sync index.js:170
    unsubscribers index.js:184
    set index.js:69
    handleCellClick create.js:642
    unsub create.js:369
    handlerWithMelt event.js:23
    withMelt event.js:51
    addMeltEventListener event.js:25
    addMeltEventListener event.js:25
    action create.js:363
    Range_calendar_day bits-ui.js:32674
    action render.js:1955
    untrack runtime.js:942
    action render.js:1955
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:498
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    set sources.js:148
    Popover_trigger bits-ui.js:31401
    untrack runtime.js:942
    Popover_trigger bits-ui.js:31400
    pre_effect effects.js:161
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:497
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    mark_signal_consumers runtime.js:899
    set sources.js:148
    prop render.js:2841
    onOpenChange popover.svelte:30
    update overridable.js:9
runtime.js:445:8
    infinite_loop_guard runtime.js:445
    flush_queued_effects runtime.js:463
    flush_local_render_effects runtime.js:593
    pre_effect effects.js:162
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:497
    (Async: VoidFunction)
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    mark_signal_consumers runtime.js:899
    mark_signal_consumers runtime.js:899
    set sources.js:148
    set value +page.svelte:166
    prop render.js:2790
    set value range-calendar.svelte:56
    prop render.js:2790
    onValueChange range-calendar.svelte:74
    update overridable.js:9
    update index.js:82
    update overridable.js:5
    set2 overridable.js:16
    createRangeCalendar create.js:846
    destroy effect.js:18
    sync index.js:170
    unsubscribers index.js:184
    set index.js:69
    handleCellClick create.js:642
    unsub create.js:369
    handlerWithMelt event.js:23
    withMelt event.js:51
    (Async: EventListener.handleEvent)
    addMeltEventListener event.js:25
    forEach self-hosted:203
    addMeltEventListener event.js:25
    action create.js:363
    Range_calendar_day bits-ui.js:32674
    action render.js:1955
    untrack runtime.js:942
    action render.js:1955
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:498
    (Async: VoidFunction)
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    set sources.js:148
    Popover_trigger bits-ui.js:31401
    untrack runtime.js:942
    Popover_trigger bits-ui.js:31400
    pre_effect effects.js:161
    execute_signal_fn runtime.js:248
    execute_effect runtime.js:418
    flush_queued_effects runtime.js:474
    process_microtask runtime.js:497
    (Async: VoidFunction)
    schedule_effect runtime.js:524
    mark_signal_consumers runtime.js:897
    mark_signal_consumers runtime.js:899
    set sources.js:148
    prop render.js:2841
    onOpenChange popover.svelte:30
    update overridable.js:9

​

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 655.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.111
    Firefox Nightly: 125.0a1
    Safari: 17.3.1
    Safari Technology Preview: 17.4
  npmPackages:
    @sveltejs/kit: ^2.5.2 => 2.5.2
    bits-ui: ^0.19.5 => 0.19.5
    cmdk-sv: ^0.0.15 => 0.0.15
    svelte: ^5.0.0-next.72 => 5.0.0-next.72

Severity

blocking an upgrade
@huntabyte
Copy link
Owner

Not supporting Svelte 5 until it's stable.

Related: sveltejs/svelte#10359

@huntabyte
Copy link
Owner

Closing this to not clutter the issues that we aren't able to resolve.

@huntabyte huntabyte closed this as not planned Won't fix, can't repro, duplicate, stale Mar 9, 2024
@Plorenzo
Copy link
Author

just to update, this appears to be working fine on [email protected]

@Najidnadri
Copy link

a bit of update, same thing happened to me at version 5.0.0-next.241, downgrading to .75 not solving the issue.

Logs

chunk-3POPQNB6.js?v=9e568565:874 Uncaught Error: ERR_SVELTE_TOO_MANY_UPDATES: Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops.
    at infinite_loop_guard (chunk-3POPQNB6.js?v=9e568565:874:11)
    at flush_queued_effects (chunk-3POPQNB6.js?v=9e568565:883:5)
    at flush_local_pre_effects (chunk-3POPQNB6.js?v=9e568565:1002:3)
    at execute_effect (chunk-3POPQNB6.js?v=9e568565:868:5)
    at flush_queued_effects (chunk-3POPQNB6.js?v=9e568565:894:13)
    at process_microtask (chunk-3POPQNB6.js?v=9e568565:915:3)

fixed it by just updating @sveltejs/vite-plugin-svelte to 4.0.0-next.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Plorenzo @huntabyte @Najidnadri