Svelte: <svelte:head> creates duplicate elements on hydration

Created on 21 Jul 2018 · 14Comments · Source: sveltejs/svelte

When hydrating SSR-generated Svelte components, the component creates duplicate elements. This seems to be true for all elements other than title. Please see the following repo:
https://github.com/morleytatro/svelte-head-test

Steps to repro:

npm install
npm run start
Visit localhost:3333 in your browser.
Check the two meta tags and the canonical link element.

bug has pr

Source

morleytatro

👍6 👀1

Most helpful comment

@Conduitry Unfortunately this is happening again. We're using Sapper 0.28.9 and Svelte 3.28.0 (it was happening with 0.28.8 and 3.27.0 as well; I upgraded to see if that would fix it, but no luck).

Confirmed me as well.
Using Svelte 3.280 and Sapper 0.28.9

rawoke083 on 1 Oct 2020

👍3

All 14 comments

I just checked, and this issue is plaguing Sapper as well. I've noticed that other frameworks add a data attribute to specify which elements are tracked. Would it help to add a data-svelte-head attribute to head elements to properly hydrate them on initial page load?

morleytatro on 25 Jul 2018

Hi, is there any fix for this yet? We are using version 2.16.0 and are having this issue as well.

jackyef on 15 Apr 2019

I've been doing Sapper lighthouse tests because I want perfect SEO. Lighthouse told me to add <meta name="Description" content="Put your description here."> to each page. So I did, using <svelte:head> on each page e.g.

<svelte:head>
    <title>About</title>
    <meta name="description" content="foo bar baz">
</svelte:head>

I just added the meta line, all else was there before, on each page. After adding the meta line I'm seeing two issues:

doesn't hot reload anymore in dev mode, I have to manually click reload
it only puts the first meta inside head (currently index.svelte), but then on every other page i.e. no matter what page I visit, it's always the same meta tag incl. name and content; in fact, it seems head doesn't change at all or at least not the meta with name and content.
title works fine though, renders in dev mode and is also different on every page

evdama on 29 Jun 2019

PR for this issue https://github.com/sveltejs/sapper-template/pull/158

evdama on 1 Jul 2019

I cannot reproduce the problem with the current REPL (3.16.4).
Can this issue be closed?

kuechlerm on 12 Dec 2019

What were you doing to test? The REPL doesn't perform any hydration.

Conduitry on 12 Dec 2019

@Conduitry Sorry, I overlooked that point.

kuechlerm on 12 Dec 2019

Presumably the way to address this would be to have the SSR code mark or delimit its <head> elements in some way so that the client-side hydration code can see what needs to be replaced.

One fairly obvious way to do this would be to a unique hash-based string for each component that's added as an attribute to each element in the component's SSR'd contribution to the <head>. This won't work with {@html} though, where we can't see the elements at compile time. I don't think we want to have the SSR code parsing through the HTML and adding the attributes at runtime.

Another option is some sort of wrapping element, or separating elements before and after this component's <head> portion. We need to now run afoul of HTML rules though, and I think there's a pretty limited number of tags that are allowed in the head. Perhaps there's some innocuous tag (maybe a <meta> tag with no name or content?) that we can stick in there, and then the hydration code is responsible for looking for these.

Conduitry on 10 Jan 2020

react-helmet uses dataset attributes for this:

<meta data-react-helmet="true" property="og:type" content="website">

nsivertsen on 10 Jan 2020

Fixed (finally!) in 3.17.0.

Conduitry on 13 Jan 2020

@Conduitry Unfortunately this is happening again. We're using Sapper 0.28.9 and Svelte 3.28.0 (it was happening with 0.28.8 and 3.27.0 as well; I upgraded to see if that would fix it, but no luck).

I'm having trouble pinpointing exactly what the pattern is, since not every route's <svelte:head> is duplicated on the client side. In our main _layout file the entire contents of <svelte:head> are duplicated, and in some individual routes; but not every single one.

I'll try to create a repro repo and post it tomorrow.

jhwheeler on 29 Sep 2020

👍3

@Conduitry Unfortunately this is happening again. We're using Sapper 0.28.9 and Svelte 3.28.0 (it was happening with 0.28.8 and 3.27.0 as well; I upgraded to see if that would fix it, but no luck).

Confirmed me as well.
Using Svelte 3.280 and Sapper 0.28.9

rawoke083 on 1 Oct 2020

👍3

Im seeing this too when i do:

<svelte:head>
  {@html page.yoast_head}
</svelte:head>

matt3224 on 11 Nov 2020

@matt3224 no need to post the same comment on multiple issues. you can simply give a thumbs up on the issue if you'd like to indicate it's one you care about