Svelte 5: $$props race condition (?) with non-zero index update of array

[matteopolak]

Describe the bug

Reactive content inside of an if block attempts to update even when it's not valid (i.e. the if predicate is falsy), resulting in unexpected runtime errors. This only occurs if the first update passes the if check. The very next update will ignore the if check, but the one after that will not. In order to fire it multiple times, it must be set back to something valid on the 3rd attempt, then it can be invalid again.

In the provided REPL:

<div>
	{#if item}
		{item.length}
	{/if}
</div>

The following block should only be attempting to compute item.length if item is truthy (in this case, we really only care that it can't be null inside the block). However, updating any element in the items array (except index 0, for whatever reason?) results in item.length being computed even though item is null, resulting in a runtime error when there shouldn't be.

Reproduction

This error can be reliably replicated by pressing set object, then set null. Not sure why, but if you press set null first, the error will never occur, even if you press set object then set null again.

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACp1R0W6DMAz8FSubBJWqor2ygDTtM4AHCqbNFpIoMZ2qjH9fAl27qS_TnrAP3-V89mwQEh3LK89UOyLL2YsxbMvobGLjTigJQ-_0ZLuIcNdZYQhkqw5FzcjVrKxVTWI02hK86vBVqAgGq0dIdtkV2a1iyXMYDwSJBIJwdFDAo6OWkKeOrFAH-AQ1SbmpmjKtkiNKqZMtJB_ayj4W-zMmzSbI8Gw1Ew0o_4Btd7xItm4p5vgQv3nyCwhZIPgsjscBxfcTkVagVSdF9174dANFCekiVT01weDiZy7BBdOxBp6tpPJP9MsS3wp6_4Yd_dQICY-6F4PAnuVkJ5y314Nc7f_nLJ1WLuy9pAFzjNpYbRz38We4WoBz-BV7PA_NZXoXMO_FadH0D2K4xRv6WO8kqgMtgZLPxDBH9sq4X66ZvwAe9SZpeQIAAA==

Logs

Uncaught TypeError: $$props.item is null
    Component Component.svelte:24
    text_effect render.js:380
    execute_signal_fn runtime.js:342
    execute_effect runtime.js:487
    flush_queued_effects runtime.js:539
    process_microtask runtime.js:558
    schedule_effect runtime.js:579
    mark_signal_consumers runtime.js:1001
    set_signal_value runtime.js:1064
    set runtime.js:881
    set proxy.js:245
    on_click +page.svelte:9
    handle_event_propagation render.js:1307
    event_handle render.js:2788
    mount render.js:2800
    createRoot render.js:2674
    Svelte4Component legacy-client.js:67
    <anonymous> legacy-client.js:44
    initialize client.js:363
    _hydrate client.js:2093
    start start.js:22
    <anonymous> test:1300
    promise callback* test:1299
Component.svelte:24:32

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 6900HS with Radeon Graphics
    Memory: 18.09 GB / 31.24 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
    Firefox: 122.0b3 (added manually)
    Chrome: 120.0.6099.130 (added manually)
  npmPackages:
    svelte: 5.0.0-next.27 => 5.0.0-next.27

Severity

annoyance