Hydration failing with DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

[vultix]

Describe the bug

When using a sveltekit project with the new svelte 5 preview, I'm getting a hydration error when trying to pass child elements. This error occurs both when using <slot/> and {@render children()}.

This only seems to occur if a few conditions hold:

• The child elements contain one of td, tr, th, tbody, tr, thead and you render the child elements in a #each block
• You nest a svelte component within itself (e.g. <Div><Div>hi</Div></Div>)

Reproduction

Here's a stackblitz reproduction of the problem: https://stackblitz.com/edit/sveltejs-kit-template-default-xzcrsi?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=package.json,src%2Froutes%2FTable.svelte,src%2Froutes%2F%2Bpage.svelte,src%2Fapp.d.ts&title=SvelteKit%20Default%20Template

After opening the stackblitz link, open devtools and note the error message.

Basic reproduction steps:

1. Have a component that uses either <slot/> or {@render children()}
2. Create an instance of that component
3. For the children of that instance, use a #each block, rendering any table element (td, tr, etc)
4. You should see the error in the console

I have another reproduction using the nested element approach here:
https://stackblitz.com/edit/sveltejs-kit-template-default-8bn5tx?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=package.json,src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2FDiv.svelte&title=SvelteKit%20Default%20Template

Logs

chunk-E4357WXT.js?v=176774cb:3494 Hydration failed because the initial UI does not match what was rendered on the server. DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Module.child (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:162:12)
    at https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/src/routes/+page.svelte:31:19
    at https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:2856:7
    at execute_signal_fn (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:3794:7)
    at execute_effect (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:3898:31)
    at schedule_effect (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:3961:5)
    at internal_create_effect (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:4372:5)
    at render_effect (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:4440:10)
    at each_item_block (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:2853:19)
    at reconcile_indexed_array (https://sveltejskittemplatedefaultxzcr-nwsl-ybr6fjpf--5173--420f2654.local-corp.webcontainer.io/node_modules/.vite/deps/chunk-E4357WXT.js?v=176774cb:585:17)
mount @ chunk-E4357WXT.js?v=176774cb:3494
createRoot @ chunk-E4357WXT.js?v=176774cb:3422
Svelte4Component @ chunk-E4357WXT.js?v=176774cb:5079
(anonymous) @ chunk-E4357WXT.js?v=176774cb:5058
initialize @ client.js?v=176774cb:288
_hydrate @ client.js?v=176774cb:1836
await in _hydrate (async)
start @ start.js:22
(anonymous) @ (index):27
Promise.then (async)
(anonymous) @ (index):26

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: =2.1.1 => 2.1.1 
    @sveltejs/kit: =1.27.4 => 1.27.4 
    svelte: =5.0.0-next.4 => 5.0.0-next.4 
    vite: =4.4.0 => 4.4.0

Severity

blocking an upgrade

Additional Information

No response

[dummdidumm]

This is probably a table-browser-auto-inserts-thead/tbody hydration mismatch thing. Probably the only way to fix this is to check and error in dev mode before the html string is sent over the wire.

[vultix]

@dummdidumm I've managed to get the same error, this time using only <div> elements. The error seems to be due to nesting the elements.

Here's the recreation:
https://stackblitz.com/edit/sveltejs-kit-template-default-8bn5tx?description=The%20default%20SvelteKit%20template,%20generated%20with%20create-svelte&file=package.json,src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2FDiv.svelte&title=SvelteKit%20Default%20Template

[digi4care]

I have a similar problem. I have an SEO component that writes something to svelte:head, and in the same component, I am loading three other components that do the same, so all four are writing something with svelte:head.
error: RR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: this={...} of svelte:component should specify a Svelte component.

[half-metal]

I have the same errors with Svelte 5.0.0-next.1 in Sveltekit,

[psytrx]

Similar behavior with mode-watcher.
It injects some Script into the head, which is likely the reason.

An issue exists, which has been closed "as there is supposed to be backward compatibility".

[mustafa0x]

this bug was cause by the following, which made no sense. even stranger: i couldn't reproduce locally, just on remote. even after trying with pnpm run preview or node -- build/index.js

import Envelope from 'phosphor-svelte/lib/Envelope'

<Envelope
    class="ml-1 inline-block transition-transform duration-100"
    color="currentColor"
    size={24}
    weight="bold"
/>

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at ce (https://example.com/_app/immutable/chunks/disclose-version.v0n8y_Ea.js:1:1818)
    at c1 (https://example.com/_app/immutable/chunks/Envelope.CLt6H9m5.js:1:2710)
    at La (https://example.com/_app/immutable/nodes/2.CwgW25T4.js:1:5551)
    at Ca (https://example.com/_app/immutable/nodes/2.CwgW25T4.js:1:6479)
    at Qa (https://example.com/_app/immutable/nodes/2.CwgW25T4.js:1:8219)
    at https://example.com/_app/immutable/entry/app.D8G6VLKe.js:26:28991
    at https://example.com/_app/immutable/chunks/svelte-component.euRejRrp.js:1:520
    at Sn (https://example.com/_app/immutable/chunks/runtime.CmubDmvt.js:1:6170)
    at j (https://example.com/_app/immutable/chunks/runtime.CmubDmvt.js:1:7216)
    at R (https://example.com/_app/immutable/chunks/runtime.CmubDmvt.js:1:2307)

[ryoppippi]

i got this issue when using sveltekit2 and svelte5 for video tag
The weird thing is that this issue happens even tho I don't use snippets

[dummdidumm]

Various bugs related to hydration have been fixed over the past few months/weeks. Specifically the mentioned nested component divs and head issues should be resolved. What's still not working is recovering from auto-inserted elements (like omitting the tbody tag in a table).

From those who have contributed to this thread - can you please check if your issues still occur with the latest version, and if so, provide a reproduction (via Stackblitz for example)?

[Coronon]

I just tested the original reproduction with the newest versions and get the following errors:

Firefox: Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Text
Chrome: Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

which could be possibly related to: sveltejs/svelte#12422

Reproduction: https://stackblitz.com/edit/sveltejs-kit-template-default-6zahg7?file=package.json

[ryoppippi]

I still got the bug on dev mode.
Production mode is fine.