Production build failure of svelte@5.0.0-next.179 -> svelte@5.0.0-next.182

[vipero07]

Describe the bug

In production only svelte is attempting to append a child to a text node during hydration. This causes JS to hard crash and the page to fail.

This bug did not occur in svelte@5.0.0-next.178

Reproduction

The component where this occurs is a simple breadcrumb component

<svelte:options runes={true} />

<script lang="ts">
  const {
    crumbs = [],
  }: {
    crumbs: { name: string; href: string }[];
  } = $props();
</script>

<div class="text-sm text-gray-500 leading-tight print:hidden last:children:hidden">
  {#each crumbs as crumb (crumb)}
    <a href={crumb.href}>{crumb.name}</a>
    <span class="i-mdi:chevron-right"></span>
  {/each}
</div>

changing the component so the children of the each block are all on one line fixes this issue. E.G.

<svelte:options runes={true} />

<script lang="ts">
  const {
    crumbs = [],
  }: {
    crumbs: { name: string; href: string }[];
  } = $props();
</script>

<div class="text-sm text-gray-500 leading-tight print:hidden last:children:hidden">
  {#each crumbs as crumb (crumb)}
    <a href={crumb.href}>{crumb.name}</a><span class="i-mdi:chevron-right"></span>
  {/each}
</div>

But it shouldn't be attempting to append a child to a text node.

Logs

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at child (http://localhost:5173/_app/immutable/chunks/template.C_U0b9P4.js:1:2965)
    at http://localhost:5173/_app/immutable/chunks/PageHeader.CzbLRe1B.js:1:2119
    at http://localhost:5173/_app/immutable/chunks/each.CfV9eyq3.js:1:6457
    at update_reaction (http://localhost:5173/_app/immutable/chunks/runtime.BlnSRXs1.js:1:15915)
    at update_effect (http://localhost:5173/_app/immutable/chunks/runtime.BlnSRXs1.js:1:18739)
    at create_effect (http://localhost:5173/_app/immutable/chunks/runtime.BlnSRXs1.js:1:4755)
    at branch (http://localhost:5173/_app/immutable/chunks/runtime.BlnSRXs1.js:1:7051)
    at create_item (http://localhost:5173/_app/immutable/chunks/each.CfV9eyq3.js:1:6446)
    at http://localhost:5173/_app/immutable/chunks/each.CfV9eyq3.js:1:3003
    at update_reaction (http://localhost:5173/_app/immutable/chunks/runtime.BlnSRXs1.js:1:15915)

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.12 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.volta/tools/image/node/20.14.0/bin/node
    Yarn: 4.3.1 - ~/.volta/tools/image/yarn/4.3.1/bin/yarn
    npm: 10.7.0 - ~/.volta/tools/image/node/20.14.0/bin/npm
    bun: 1.1.12 - ~/.volta/bin/bun
  Browsers:
    Brave Browser: 121.1.62.156
    Safari: 17.5
  npmPackages:
    svelte: 5.0.0-next.182 => 5.0.0-next.182

Severity

annoyance

[vipero07]

I want to highlight, this problem doesn't occur in dev, only in prod builds.

[dummdidumm]

I'm not able to reproduce this given the code snippet. Please provide a reproduction repository.

[vipero07]

https://replit.com/@yodaissmart/500-next182-prod-issue?v=1

In the shell run npm run build && npm run preview

[vipero07]

I should probably have noted this is while in use with conjunction with the latest version of sveltekit, and given it occurs when hydrating its probably sveltekit failing, but the failure is specific to the version of svelte. As noted, it doesn't occur in svelte@5.0.0-next.178

[ixxie]

I've observed a very similar issue, also on a SvelteKit project; however:

• The error DOMException: Node.appendChild: Cannot add children to a Text
• It only manifests at next.180 and beyond, and does not manifest for next.179