kit icon indicating copy to clipboard operation
kit copied to clipboard
verified publisher icon sveltejs

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

Open vultix opened this issue 2 years ago • 27 comments

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

vultix avatar Nov 16 '23 22:11 vultix

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.

dummdidumm avatar Nov 16 '23 22:11 dummdidumm

@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

vultix avatar Nov 16 '23 22:11 vultix

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.

digi4care avatar Dec 29 '23 10:12 digi4care

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

half-metal avatar May 05 '24 06:05 half-metal

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".

psytrx avatar Jul 16 '24 09:07 psytrx

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)

mustafa0x avatar Jul 26 '24 15:07 mustafa0x

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

ryoppippi avatar Jul 31 '24 17:07 ryoppippi