Duplicate head elements occur when html comments are stripped

[ryans-usafacts]

Describe the bug

The solution to the duplicate content svelte:head element bug (and also this one) requires HTML comments to be present in order to function correctly. Many minification tools strip HTML comments, and as does CloudFlare by default in many environments.

Duplicating the head element is a fairly insidious bug because it isn't immediately obvious that anything is wrong, but for our project (in SvelteKit) it decreased performance by loading analytics scripts multiple times. We also suspect that it may have broken some web indexing, but couldn't be sure.

If there is a better way to solve this than relying on comments, that would be great. I've marked the Severity as annoyance, but only because we have found a highly unsatisfactory workaround that I would rather not have in place long term.

Reproduction

One straightforward way to reproduce this would be to use the reproduction repo provided in this issue, which minifies the html response and strips comments: when comments are stripped, the duplicate header bug is present.

Logs

No response

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 90.36 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 105.0.2
    Safari: 16.1
  npmPackages:
    svelte: ^3.55.0 => 3.55.0

Severity

annoyance

[imdj]

I just found out that I'm a victim of this too. It's a really nasty "bug" because like you mentioned it went unnoticed for a long time.
I only caught it now because I manually used Google Rich Results Test only to find our json+ld is invalid because everything is duplicated.

I had to turn off cloudflare HTML auto minify (Credits to you)

[ryans-usafacts]

It sure would be great if this sneaky bug was fixed!

[NickantX]

I'm noticing this issue too. It's causing a problem with my theme system as if the user changes their theme, the head element is not being correctly updated to remove the old stylesheet when the new one is included. This leads to both stylesheets being active at the same time, and has created an annoying difference between development and production builds.

[tausifcreates]

+1

[jimzer]

+1

[joligoms]

+1

[Shekhar-Zealous]

+1

Upgrading svelte version, disabling HTML compression from Cloudflare doesn't helped my project.

The svelte:head duplication's issue still persists on some of the SSR pages and not in all pages which is quite weird even though in local which doesn't even use cloudflare :/

Is anyone here has seen this issue as really fixed?

[fabriciosbdemorais]

My temporarily fix:

OnlySSR.svelte

{#if typeof window === "undefined"}
   <slot/>
{/if}

Page.svelte

<svelte:head>
   <OnlySSR>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </OnlySSR>
</svelte:head>

[larrybahr]

I had the same issue with the latest svelte version (4.2.12) even on local host in dev mode. SSR was also not working for the meta tags so the above work around did not solve my issue.

The root of my issue was that several of my components, which were incorporated within <svelte:head>, contained internal instances of <svelte:head> themselves, resulting in nested <svelte:head> tags. Eliminating these nested svelte:head tags resolved the problem.

Cleaning up the components to remove the nesting of <svelte:head> tags fixed the problem for me.

[fabriciosbdemorais]

I forgot to mention that I am using the esbuild-svelte plugin to compile svelte components with esbuild and I can't figure out how fix that. Maybe isn't a problem anymore when used with vite.

Anyway I noticed that the tag title is not duplicating and left me confused.

That's why I chose to create a component to handle this.

[dummdidumm]

Svelte's hydration mechanism is heavily relying on comments, stripping them out will break things. The minifier should be adjusted such that it doesn't strip comments. Therefore closing.

[nikolaibumper9]

My temporarily fix:

OnlySSR.svelte

{#if typeof window === "undefined"}
   <slot/>
{/if}

Page.svelte

<svelte:head>
   <OnlySSR>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </OnlySSR>
</svelte:head>

+1