Skip to content

Svelte 5: Displaying component-bound prop causes ERR_SVELTE_HYDRATION_MISMATCH #10426

@ciscoheat

Description

@ciscoheat

Describe the bug

When binding a prop to a component prop and displaying it in certain circumstances, in the browser there is a ERR_SVELTE_HYDRATION_MISMATCH error.

It varies quite a lot when it fails, so the repo gives the details in code.

Reproduction

https://github.com/ciscoheat/svelte5-bind-hydrate

Logs

ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. TypeError: Cannot read properties of undefined (reading '__nodeValue')
    at text (render.js:444:30)
    at render.js:434:22
    at execute_signal_fn (runtime.js:360:6)
    at execute_effect (runtime.js:538:29)
    at schedule_effect (runtime.js:634:4)
    at internal_create_effect (runtime.js:1383:3)
    at render_effect (runtime.js:1513:9)
    at Module.text_effect (render.js:434:2)
    at +page.svelte:10:20
    at render.js:1523:5

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 44.00 GB / 63.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.21 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.106)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.50

Severity

blocking an upgrade

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions