Conditional elements inside <svelte:head> throw console errors on hydration.

[morleytatro]

At least two types of tags are throwing errors when included conditionally: link and meta. This only seems to be an issue when using Sapper. With Svelte alone and no server-side rendering, the problem doesn't occur. See this repo and specifically lines 2-4 of the Layout.html file. The conditional is the only thing added to the Sapper template. The error thrown is:

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

[ludwigschubert]

FYI @morleytatro we ran into the same issue with an {#each} block around meta tags. Our workaround is to use a nested child component that has the <svelte:head> directive.

[morleytatro]

Here's another repro:
https://github.com/morleytatro/svelte-head-test/tree/head-conditionals

Simply install the modules and fire it up with yarn start or npm run start.

Seems like this might be connected to either or both of these:
sveltejs/sapper#475
#1774

[antony]

Yes, I raised #475 for this exact same reason, as I'm trying to build a favicon plugin which dynamically generates and includes required assets, and as it stands, it can't work.

An important thing to note here is that the solution by @ludwigschubert doesn't work, under sapper, at least. Any each I try to write, no matter how far down I try to bury it in child components, breaks :)

[Panya]

It was fixed in 3.4.4 and above.

[morleytatro]

@Panya Confirmed. I'll close it.

[RobbieTheWagner]

I'm still not able to use {#each} in <svelte:head> in Sapper.