search

sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.7k stars 4.23k forks source link

hydration_mismatch with nested input field #12830

Open ciscoheat opened 2 months ago

ciscoheat commented 2 months ago

Describe the bug

On 5.0.0-next.219, I get a hydration_mismatch error in the browser with a very simple html:

<label>
  <input name="email" />
</label>

It seems to only happen for input fields (afaik), and when it's nested.

I backtracked, and I don't get the error with 5.0.0-next.212.

Reproduction

https://github.com/ciscoheat/hydration-input

Logs

warnings.js:56 [svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server

warn    @   client.js?v=2b9e62f0:2641
hydration_mismatch  @   warnings.js:56
reset   @   hydration.js:51
_page   @   +page.svelte?t=1723538579000:17
(anonymous) @   hmr.js:47
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   hmr.js:38
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
wrapper @   hmr.js:28
(anonymous) @   root.svelte:85
validate_dynamic_component  @   validate.js:24
(anonymous) @   root.svelte:84
(anonymous) @   svelte-component.js:35
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   svelte-component.js:35
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
component   @   svelte-component.js:26
(anonymous) @   root.svelte:83
(anonymous) @   snippet.js:62
slot    @   slot.js:19
Layout  @   layout.svelte?v=2b9e62f0:15
(anonymous) @   hmr.js:47
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   hmr.js:38
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
wrapper @   hmr.js:28
(anonymous) @   root.svelte:75
validate_dynamic_component  @   validate.js:24
(anonymous) @   root.svelte:74
(anonymous) @   svelte-component.js:35
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   svelte-component.js:35
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
component   @   svelte-component.js:26
(anonymous) @   root.svelte:73
(anonymous) @   if.js:64
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   if.js:64
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
if_block    @   if.js:40
Root    @   root.svelte:66
(anonymous) @   hmr.js:47
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   hmr.js:38
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
block   @   effects.js:319
wrapper @   hmr.js:28
(anonymous) @   render.js:240
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
branch  @   effects.js:327
(anonymous) @   render.js:222
update_reaction @   runtime.js:290
update_effect   @   runtime.js:462
create_effect   @   effects.js:119
effect_root @   effects.js:233
_mount  @   render.js:221
hydrate @   render.js:129
Svelte4Component    @   legacy-client.js:105
(anonymous) @   legacy-client.js:49
initialize  @   client.js?v=2b9e62f0:434
_hydrate    @   client.js?v=2b9e62f0:2388
await in _hydrate       
start   @   client.js?v=2b9e62f0:293
(anonymous) @   (index):27
Promise.then        
(anonymous) @   (index):26

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 43.39 GB / 63.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.0 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.0.32 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.3 => 3.2.3
    @sveltejs/kit: ^2.5.21 => 2.5.21
    @sveltejs/package: ^2.3.3 => 2.3.3
    @sveltejs/vite-plugin-svelte: ^3.1.1 => 3.1.1
    svelte: 5.0.0-next.219 => 5.0.0-next.219
    vite: ^5.4.0 => 5.4.0

Severity

blocking an upgrade

Additional Information

No response