Duplication of elements on hydration in Svelte 3.38.0

[intrikate]

Describe the bug
Under certain conditions, hydration appends elements to the DOM alongside prerendered parts, leading to element duplication. This seems to specifically affect routes/components using svelte:head and depends heavily on components’ structure. There is no duplication after navigating away and coming back.

This behaviour is almost certainly introduced by a recent change in Svelte, but it doesn’t seem to affect much beyond SvelteKit (obviously not REPL, but also not Sapper), so may warrant a look at this side.

To Reproduce
Clone and run the demo: https://github.com/intrikate/sveltekit-duplication-issue.

Expected behavior
CSR should overwrite, not duplicate, SSR.

Information about your SvelteKit Installation:

Diagnostics

System:
OS: macOS 11.2.3
CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
Memory: 130.07 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.11 - /usr/local/bin/npm
Browsers:
Chrome: 90.0.4430.93
Firefox Developer Edition: 89.0
Safari: 14.0.3
npmPackages:
@sveltejs/kit: next => 1.0.0-next.94
svelte: ^3.38.0 => 3.38.0
vite: ^2.2.3 => 2.2.3

Severity
High.

[Kansuler]

I just upgraded my project from version 71 to 94 and met the same issue. I can confirm that it does no longer occur when I remove the <svelte:head> from my page components.

edit: downgrading to svelte@3.37.0 seems to fix the issue as well.

[DhyeyMoliya]

Experiencing the same issue while using with <svelte:head>.

[DhyeyMoliya]

@intrikate you should move this issue to sveltejs/svelte

[intrikate]

@DhyeyMoliya I decided against it. Whatever change they introduced over there apparently didn’t break anything but SvelteKit. If that’s the case, it may be a better course of action to fix the beta to accommodate a stable dependency, rather than the other way round.

[stalkerg]

@intrikate it's broken, just not so many people using a hydration and looks like we skip it during tests

[Conduitry]

Thank you for the excellent set of reproductions! I am moving this to the Svelte repro, as this is almost certainly a bug caused by the hydration changes in 3.38.0.

[lukasIO]

I was seeing the same thing. I set up a reproduction repository with minimal modification from the demo app:
lukasIO/kit-svelte-3.38@688833c

edit: ah, there was already one...

[johngrasty]

I'm seeing this as well. I didn't notice this issue already, but I also put together a repo that reproduces it. This is from skelton project, not the demo. <svelte:head> was also what I was seeing. Here's the repo in case you need it.

Repo reproducing bug

When clicking the link, the test page will not have the duplication. If reloaded, it will

[UltraCakeBakery]

I have this issue in my project without svelte:head being in the picture at all. On my end it depended on what I set as the hydration target. No element (or body) doesn't cause any duplicated items at all.

[DhyeyMoliya]

@benmccann it is not duplication of head elements, the actual elements of the affected pages are getting duplicated, like forms, divs, etc.

Update : If you mean head elements as the first html element, then ignore this comment. I was understanding head elements as <svelte:head>

[johngrasty]

@benmccann it is not duplication of head elements, the actual elements of the affected pages are getting duplicated, like forms, divs, etc.

Right. That’s what I’m seeing as well, but in my minimal repo, it seemed that just the first element was being duplicated. For example, if there are two divs that are siblings. If there is a <svelte:head>, the first div will be duplicated but not the second.