svelte: Using components in creates duplicate elements on hydration

Finally solved it! It wasn’t working for me even in 3.55 simply because of Cloudflare. This is the explanation https://github.com/sveltejs/svelte/issues/8112

All you have to do is turnoff autominify and brotli in Cloudflare Speed -> Optimization

Same on Sapper ^0.28.0 , i have a Meta component, to save me to write many times the metatags.

`<script> export let metadata = {}; </script>

{#if metadata.title}
  <title>{metadata.title}</title>
  <meta name="title" content={metadata.title} />
  <meta property="og:title" content={metadata.title} />
  <meta property="twitter:title" content={metadata.title} />
{/if}

{#if metadata.description}
  <meta name="description" content="Page Description" />
  <meta property="og:description" content="Page Description" />
  <meta property="twitter:description" content="Page Description" />
{/if} 

{#if metadata.image}
  <meta property="og:image" content="/thumbnail.jpg" />
  <meta
    property="twitter:image"
    content="/thumbnail.jpg"
  />
{/if} 

{#if metadata.imageAlt}
  <meta property="og:image:alt" content={metadata.imageAlt} />
  <meta property="twitter:image:alt" content={metadata.imageAlt} />
{/if}

{#if metadata.url}
  <meta property="og:url" content={metadata.url} />
  <meta property="twitter:url" content={metadata.url} />
{/if}

   {#if metadata.type}
    <meta property="og:type" content={metadata.type} />
{/if}

<meta property="twitter:card" content={metadata.twitterCard || "summary_large_image"} />

when i use it for each page i got the metatag even 3 times svelte:head <Meta {metadata}/>

<title>{metadata.title}</title> </svelte:head> `

This is hell 😦

I get two two title tags doing as per your example with sapper

On Thu, 1 Oct 2020, 13:29 Fábio Domingues, notifications@github.com wrote:

Note that this is only a problem in the reported example. There is no problem when done this way:

svelte:head <meta property="x" content="y"/> </svelte:head>

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/sveltejs/svelte/issues/4533#issuecomment-702071210, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKF7JAG73AWZGMEDYZC7QTSIRRZ3ANCNFSM4LE6ZRKQ .

It indeed makes working with meta tags quite hard. They are essential for production news sites. Would love to see a fix. Happy holidays guys 🎄 Appreciate the work.

If it helps, I’m currently working around this issue with the following.

import { afterUpdate } from "svelte"

afterUpdate(() => {
  Array.from(document.head.querySelectorAll("meta[data-svelte]"))
    .forEach(e => e.remove())
})

It’s not a perfect solution, but works for me as all the pre-hydrated meta tags have data attributes, probably from an earlier solution to this issue.

This should be fixed now in 3.51.0.

Im seeing this too when i do:

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

I feel this issue has been raised, fixed and re-appear a few times ? These days, whenever my SERPS or Rankings drop I have to go look at Sapper/Svelte first.