Application using LayerChart hanging after updating Svelte to 5.36.0+ (logging UpdatedAtError in 3.36.5+) #16548
Description
Describe the bug
While investigating async compat issues with LayerChart, I noticed after bumping Svelte from 5.34.1 to 5.35.4 (and beyond) begins to throw effect_update_depth_exceeded errors we had not prior.
I believe this stems from how we setup motion state / value tracking. Let me know if this should be handled differently, or is in fact a regression. The only changeset for 5.35.4 is:
fix: abort and reschedule effect processing after state change in user effect
As always, thanks for all the hard work!
Reproduction
- Checkout LayerChart PR 629 /
update-depsbranch pnpm installpnpm dev- Open the Area example (or many others with motion such as Bars and Pack). For even more taxing examples, view Force Disjoint Graph, Force Tree, or Force Lattice)
Logs
client:733 [vite] connecting...
client:827 [vite] connected.
Area:24 Last ten effects were: (10) [null, ƒ, ƒ, ƒ, null, ƒ, ƒ, ƒ, ƒ, ƒ]0: null1: () => { motion.set(getValue()); }2: () => { motion.set(getValue()); }3: () => {…}4: null5: () => { motion.set(getValue()); }6: () => { refProp($.get(ref)); }7: () => { refProp($.get(ref)); }8: () => { svgRefProp($.get(svgRef)); }9: () => { motion.set(getValue()); }length: 10[[Prototype]]: Array(0)
log_effect_stack @ chunk-REG52R6L.js?v=13908794:1877
infinite_loop_guard @ chunk-REG52R6L.js?v=13908794:1897
flush_queued_root_effects @ chunk-REG52R6L.js?v=13908794:1918
flushSync @ chunk-REG52R6L.js?v=13908794:2034
Svelte4Component @ chunk-Q6R3MBGE.js?v=13908794:839
(anonymous) @ chunk-Q6R3MBGE.js?v=13908794:789
initialize @ client.js?v=13908794:528
navigate @ client.js?v=13908794:1643
await in navigate
start @ client.js?v=13908794:340
await in start
(anonymous) @ Area:24
Promise.then
(anonymous) @ Area:23
chunk-REG52R6L.js?v=13908794:1877 Last ten effects were: (10) [ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, null, ƒ, ƒ, ƒ]
log_effect_stack @ chunk-REG52R6L.js?v=13908794:1877
infinite_loop_guard @ chunk-REG52R6L.js?v=13908794:1897
flush_queued_root_effects @ chunk-REG52R6L.js?v=13908794:1918
chunk-REG52R6L.js?v=13908794:199 Uncaught Svelte error: effect_update_depth_exceeded
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
https://svelte.dev/e/effect_update_depth_exceeded
effect_update_depth_exceeded @ chunk-REG52R6L.js?v=13908794:199
infinite_loop_guard @ chunk-REG52R6L.js?v=13908794:1885
flush_queued_root_effects @ chunk-REG52R6L.js?v=13908794:1918
chunk-REG52R6L.js?v=13908794:199 Uncaught (in promise) Svelte error: effect_update_depth_exceeded
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
https://svelte.dev/e/effect_update_depth_exceeded
effect_update_depth_exceeded @ chunk-REG52R6L.js?v=13908794:199
infinite_loop_guard @ chunk-REG52R6L.js?v=13908794:1885
flush_queued_root_effects @ chunk-REG52R6L.js?v=13908794:1918
flushSync @ chunk-REG52R6L.js?v=13908794:2034
Svelte4Component @ chunk-Q6R3MBGE.js?v=13908794:839
(anonymous) @ chunk-Q6R3MBGE.js?v=13908794:789
initialize @ client.js?v=13908794:528
navigate @ client.js?v=13908794:1643
await in navigate
start @ client.js?v=13908794:340
await in start
(anonymous) @ Area:24
Promise.then
(anonymous) @ Area:23System Info
System:
OS: macOS 15.5
CPU: (10) arm64 Apple M1 Max
Memory: 109.75 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.17.0 - ~/Library/Caches/fnm_multishells/70747_1754315319738/bin/node
npm: 10.9.2 - ~/Library/Caches/fnm_multishells/70747_1754315319738/bin/npm
pnpm: 9.1.1 - ~/Library/pnpm/pnpm
bun: 1.1.33 - ~/.bun/bin/bun
Browsers:
Brave Browser: 136.1.78.102
Chrome: 138.0.7204.184
Safari: 18.5
npmPackages:
svelte: 5.35.4 => 5.35.4Severity
blocking an upgrade