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

vultix commented 7 months ago

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:

Have a component that uses either <slot/> or {@render children()}
Create an instance of that component
For the children of that instance, use a #each block, rendering any table element (td, tr, etc)
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 commented 7 months ago

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 commented 7 months ago

@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 commented 6 months ago

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 commented 1 month ago

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

sveltejs / kit