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 , and in the same component, I am loading three other components that do the same, so all four are writing something with . error: RR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: this={...} of 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: https://github.com/sveltejs/svelte/issues/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.

[dummdidumm]

@Coronon your issue is related to the HTML being invalid, in the sense that the browser needs to repair the DOM, which means the DOM structure is different to what Svelte expects while hydrating, resulting in that error. If you change your Table.svelte file like this:

+ <table>
+  <tbody>
+    <tr>
        <slot />
+    </tr>
+  </tbody>
+ </table>

it will work.

@ryoppippi please provide a reproduction (or point to an existing one which you refer to)

[ryoppippi]

@dummdidumm I try to create a minimal reproduction later, but I'm facing this error with this repo https://github.com/ryoppippi/sveltweet so

git clone https://github.com/ryoppippi/sveltweet
pnpm i
pnpm dev

Then go to http://localhost:5173/examples and refresh the page

[mrxbox98]

I just encountered the issue while toying around with slot snippets in a table. The error message should probably contain a bit more detail as to what caused it.