Svelte 5 - hydration_mismatch when `export const ssr = false` is set

hexagon6 commented 4 months ago

Describe the bug

When upgrading a svelte 4 sveltekit application to svelte 5 I see the following warning:

[svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server

Followed by this error:

Uncaught (in promise) TypeError: text_content_set is undefined
    clear_text_content operations.js:213
    hydrate render.js:173
    Svelte4Component legacy-client.js:75
    <anonymous> legacy-client.js:47
    initialize client.js:415
    navigate client.js:1358
    _goto client.js:359
    goto client.js:1680
    start client.js:287
    <anonymous> svelte5:25
    promise callback* svelte5:24

I narrowed it down to having a +layout.js with export const ssr = false, which was needed in svelte 4 as a imported library wants to access the global window variable (which is unavailable on server side rendering).

Reproduction

Use svelte 5 @5.0.0-next.120 and add export const ssr = false to +layout.js.

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
    Memory: 23.21 GB / 30.18 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 124.1.65.123
    Chromium: 124.0.6367.60
  npmPackages:
    svelte: ^5.0.0-next.120 => 5.0.0-next.120

Severity

blocking an upgrade

dummdidumm commented 4 months ago

Which version of SvelteKit are you using? Make sure it's the latest one.

hexagon6 commented 4 months ago

Which version of SvelteKit are you using? Make sure it's the latest one.

In package.json:

        "@sveltejs/kit": "^2.5.0"

I updated to 2.5.7 and now this error has gone, but some components don't render anymore, will investigate further.

Thanks @dummdidumm for the quick response!

sveltejs / svelte