SVELTE 5 DEPLOYMENT BUG w/ #each block, over $state array, using bind:

[svelte-kit-so-good]

Describe the bug

This is bug is quite the ping-pong ... Everything works perfectly when built locally (pnpm build && pnpm preview), but breaks on deployment (Cloudflare Pages) under certain circumstances with Svelte 5.

In a purely svelte 4 project — i.e. using a writable array instead of a $state array — there is no issue on deployment to the same platform.

The following works when built locally, but breaks on deployment:

<!-- +layout.svelte (svelte 5; semi-broken)-->
{#each iframeModals as iframe}
	<IframeModal bind:iframe /><!-- works with pnpm dev/build; breaks on deployment 💩-->
	<!-- <IframeModal {iframe} /> --><!-- fails with pnpm dev; works with pnpm build and deployment 🤷‍♀️ -->
{/each}

where iframeModals is a $state array defined in a the context="module" script section of some nested component. The following fixes the deployment bug:

<!-- +layout.svelte (svelte 5; works 👌)-->
{#each iframeModals as _, i}
	<IframeModal bind:iframe={iframeModals[i]} />
{/each}

The following non-indexed, svelte 4 variant works on deployment as well (separate, purely svelte 4 project):

<!-- +layout.svelte (svelte 4; works 👌)-->
{#each $iframeModals as iframe}
	<IframeModal bind:iframe />
	<!-- <IframeModal {iframe} /> --><!-- without bind works too! -->
{/each}

where frameModals is now a writable array.

Summary so far:

• The Svelte 4 variant works the same with/without bind: on deployment, and with pnpm dev/build.
• With Svelte 5:
  • non-index case:
    • using bind: is required to work, but breaks on deployment
    • without bind: doesnt work with pnpm dev ... but works with pnpm build and deployment!

If I manually write out the <iframeModal/> component directly (no longer need the bind:):

<!-- +layout.svelte (svelte 5; works 👌)-->
{#each iframeModals as iframe}
	<Modal body isOpen={iframe.bool} close={() => (iframe.bool = false)} class="bg-[rgba(0,0,0,0.1)]">
		<Suspense loading={iframe.loading}>
			<iframe class="h-full w-full" use:load_iframe={iframe} src={iframe.url} title={iframe.name} />
		</Suspense>
	</Modal>
{/each}

then it works again with Svelte 5 deployment.

Reproduction

No reproduction since it's a Svelte 5 bug that appears upon deployment ... Here's the Cloudflare log:

19:04:22.001    ✘ [ERROR] Cannot assign to "iframeModal" because it is a constant
19:04:22.001    
19:04:22.001        .svelte-kit/output/server/entries/pages/_layout.svelte.js:151:10:
19:04:22.001          151 │           iframeModal = $$value;
19:04:22.002              ╵           ~~~~~~~~~~~
19:04:22.002    
19:04:22.002      The symbol "iframeModal" was declared a constant here:
19:04:22.002    
19:04:22.002        .svelte-kit/output/server/entries/pages/_layout.svelte.js:142:12:
19:04:22.003          142 │       const iframeModal = each_array[$$index];
19:04:22.003              ╵             ~~~~~~~~~~~
19:04:22.003    
19:04:22.082    error during build:
19:04:22.082    Error: Build failed with 1 error:
19:04:22.082    .svelte-kit/output/server/entries/pages/_layout.svelte.js:151:10: ERROR: Cannot assign to "iframeModal" because it is a constant
19:04:22.083        at failureErrorWithLog (/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1651:15)
19:04:22.083        at /opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1059:25
19:04:22.083        at /opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1004:52
19:04:22.083        at buildResponseToResult (/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1057:7)
19:04:22.083        at /opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:1086:16
19:04:22.083        at responseCallbacks.<computed> (/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:704:9)
19:04:22.084        at handleIncomingPacket (/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:764:9)
19:04:22.084        at Socket.readFromStdout (/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild/lib/main.js:680:7)
19:04:22.084        at Socket.emit (node:events:514:28)
19:04:22.084        at addChunk (node:internal/streams/readable:324:12)
19:04:22.132     ELIFECYCLE  Command failed with exit code 1.
19:04:22.162    Failed: Error while executing user command. Exited with error code: 1
19:04:22.170    Failed: build command exited with code: 1
19:04:23.683    Failed: error occurred while running build command

Logs

No response

System Info

Deployment bug using `"svelte": "5.0.0-next.51" (but tried as far back as `5.0.0-next.20`).

Works with `"svelte": "4.2.10"`

Severity

annoyance

[dummdidumm]

#10422 recently fixed a few bugs around bindings with non-keyed arrays, seems like there's still something missing. The fact that it only happens in production hints to me that there might be some compiler or runtime logic that is only applied at dev time that causes this.

[dummdidumm]

Just realized that this is a reassignment, which is forbidden in runes mode (#10428 added a validation error, but seems we missed it for bindings) - your workaround with using an index is the correct approach.