Svelte 5: Mutating property of passed in object locks up browser

[CaptainCodeman]

Describe the bug

Running in Svelte 4 / non-runes mode.

Sorting a child array on an object property passed in triggers reactivity as though the passed in property changed (it's not using bind) resulting in the browser locking up.

Seems to happen if data comes from a SK load fn, and is then passed from the page to a component that changes it (without using bind)

Pausing the code sometimes breaks at the error shown below.

Reproduction

+page.js

export async function load() {
	return {
		folder: {
			name: 'a',
			count: 1,
			children: [
				{ name: 'e', count: 3 },
				{ name: 'c', count: 4 },
				{ name: 'd', count: 2 },
				{ name: 'b', count: 1 },
			],
		},
	}
}

+page.svelte

<script>
	import Component from './Component.svelte'

	export let data

	$: folder = data.folder
</script>

<Component {folder} />

Component.svelte

<script>
	export let folder

	function sortedChildren(folder) {
		return folder.children.sort((a, b) => a.count - b.count)
	}
</script>

<h1>{folder.name}</h1>

<ul>
	{#each sortedChildren(folder) as child}
		<li>{child.name} {child.count}</li>
	{/each}
</ul>

Logs

client.js:299 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
    at effect_update_depth_exceeded (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:137:19)
    at infinite_loop_guard (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1197:5)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1342:5)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)
    at flush_sync (http://localhost:5173/node_modules/.vite/deps/chunk-WMXRUQR4.js?v=290ed5a1:1352:7)

System Info

System:
    OS: macOS 14.4.1
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 284.70 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.0.0 - ~/Library/pnpm/node
    npm: 10.5.1 - ~/Library/pnpm/npm
    pnpm: 9.1.0 - ~/Library/pnpm/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 123.1.64.113
    Chrome: 124.0.6367.119
    Chrome Canary: 126.0.6465.0
    Safari: 17.4.1
    Safari Technology Preview: 17.4
  npmPackages:
    svelte: ^5.0.0-next.123 => 5.0.0-next.123

Severity

annoyance

[Alia5]

I've ran into this as well

Array.sort sorts the array in place.
Use .toSorted or copy the array before like [...arr].sort(...)

[trueadm]

It would be good to get a REPL of this if possible.

[CaptainCodeman]

Here's a live version: https://stackblitz.com/edit/sveltejs-kit-template-default-bhlpxc

[trueadm]

Can you make a REPL please?

[CaptainCodeman]

Sorry, I don't know how to reproduce it in a REPL

[brunnerh]

The StackBlitz project also does not seem to reproduce the problem?

[gtm-nayan]

You probably need a lot of items to make it obvious,
related: https://discord.com/channels/457912077277855764/1153350350158450758/1233989949498593330

[CaptainCodeman]

The StackBlitz project also does not seem to reproduce the problem?

Does for me, running in Chrome. It's unrelated to the number of items. In an actual app it's completely unresponsive after this happens.

Open dev tools and refresh the preview, and you should see the error:

[brunnerh]

You are right, since there are no interactive elements, it is just not directly apparent that anything broke. Wonder why that does not happen in the REPL, though...

[CaptainCodeman]

Dunno, I tried lots of different combinations and was never able to get it to trigger the same behavior.

[singlyfy]

I am experiencing similar issue, however, in my case:

• browser completely freezes and have to xkill it
• I am using runes and no sorting, but I do have nested structure (parent/child folder relationship)
• it only happens in DEV mode...running a build & preview doesn't have the issue

I'll try to isolate and extract a simple reproducer

[trueadm]

@singlyfy Are you mixing Svelte 4 and Svelte 5 components? It could be that the deep_read logic in Svelte is getting stuck on very deep object structures.

[singlyfy]

@trueadm : project itself is a mix of v4 and v5, specific component is converted to v5. I'll try to run it in a clean v5 project to see if that makes any difference.