Svelte 5 next: Not able to use if statement within svelte:head and with multiple svelte:head

[shinokada]

Describe the bug

When I use if statement within svelte:head, I get an error: Uncaught (in promise) Svelte error: svelte_component_invalid_this_value.

I created stackblitz and a repo.

The followings are what I noticed so far:

1. When I use Ruantics.svelte and RunesMetaTags.svelte individually in +layout.svelte, both works.
2. But when I use both together, a browser returns the above error.
3. If I change one of svelte:head to div, it works.
4. Removing if statements within svelte:head works.

Simplified code:

Runatics.component

<script lang="ts">
  interface Props {
    analyticsId: string;
  }
  let { analyticsId }: Props = $props();

  $effect(() => {
    const script = document.createElement('script');
    script.innerHTML = `
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', '${analyticsId}');
      `;
    document.head.appendChild(script);
  });
</script>

<svelte:head>
  <script async src="https://www.googletagmanager.com/gtag/js?id={analyticsId}"></script>
</svelte:head>

RunesMetaTags.svelte

<script lang="ts">
  interface MetaProps {
    title?: string;
    robots?: boolean;
    description?: string;
    keywords?: string;
  }
  let { title, description, keywords }: MetaProps = $props();
  console.log(title, description, keywords)
</script>

<svelte:head>
  {#if title}
    <title>{title}</title>
  {/if}

  {#if description}
    <meta name="description" content={description} />
  {/if}

  {#if keywords}
    <meta name="keywords" content={keywords} />
  {/if}
</svelte:head>

+layout.server.ts

interface MetaProps {
  title?: string;
  robots?: boolean;
  description?: string;
  keywords?: string;
}
import { ANALYTICS_ID } from '$env/static/private';
export const load = ({ url }) => {

  const layoutMetaTags: MetaProps = {
    title: 'My title',
    description: 'My description',
    keywords: 'My keywords'
  };
  return {
    layoutMetaTags,
    ANALYTICS_ID
  };
};

+layout.svelte

<script>
  import { RunesMetaTags, Runatics } from '$lib';
  let { children, data } = $props();
  const analyticsId = "ABCDEFG";
  let metaTags = $state( data.layoutMetaTags );
</script>

<RunesMetaTags {...metaTags}/>
<Runatics {analyticsId} />
{@render children()}

Reproduction

I created stackblitz and a simplified repo.

git clone [email protected]:shinokada/svelte-next-issue.git 
cd svelte-next-issue
pnpm i && pnpm dev

Logs

No response

System Info

System:
    OS: macOS 14.6
    CPU: (10) arm64 Apple M2 Pro
    Memory: 79.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.5.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Edge: 126.0.2592.87
    Safari: 18.0
  npmPackages:
    svelte: 5.0.0-next.181 => 5.0.0-next.181

Severity

blocking an upgrade