Skip to content

Hydration error from regression when updating Svelte from 5.6.1 to 5.6.2 #14588

Closed
@samal-rasmussen

Description

@samal-rasmussen

Describe the bug

After I update Svelte from 5.6.1 to 5.6.2 I get this hydration error:
HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

So I'm not 100% if this is considered a Svelte or SvelteKit bug.

Reproduction

This can be reproduced with the code snipped below:

<script>
  import { browser } from "$app/environment";
</script>

{#if !browser}
  <slot />
{/if}

<div>
  <slot />
</div>

I am conditionally rendering something differently on mobile and desktop, but I can't check media queries on the backend, so the condition is short circuiting on a check on browser, so I end up getting different results on the server and client. I stripped out all the media query stuff because it had no bearing on the bug.

I've put it in a stackblitz:
https://stackblitz.com/edit/svelte-kit-rvd1ht?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (3) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: 3.3.1 => 3.3.1 
    @sveltejs/kit: 2.9.0 => 2.9.0 
    @sveltejs/vite-plugin-svelte: 5.0.1 => 5.0.1 
    svelte: 5.6.2 => 5.6.2 
    vite: 6.0.3 => 6.0.3

Severity

blocking an upgrade

Additional Information

@trueadm I see the only thing in Svelte 5.6.2 was the addition of tree shaking on if statements that you made.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions