Svelte 5: Can not use a writable snippet as the argument of the #snippet tag.

[HighFunctioningSociopathSH]

Describe the bug

If you try to make a writable store with a snippet function as its value, and tried to used it like

{#if $writableSnippet}
{@render $writableSnippet()}
{/if}

svelte will crash and tell you that $writableSnippet is undefined. and I can assure you that $writableSnippet is defined and is indeed a snippet. I was able to recreate this problem on multiple machines and different versions of Svelte 5 but weirdly enough it works fine on Vercel's Svelte 5 playground.
This issue can be fixed if you make a derived variable using $writableSnippet and use that instead.

Reproduction

// test.svelte

<svelte:options runes />

<script lang="ts">
  import type { Snippet } from "svelte";
  import { writable } from "svelte/store";

  let { randomSnippet } = $props<{ randomSnippet: Snippet }>();

  let writableSnippet = writable(randomSnippet);
</script>

{@render $writableSnippet()}

// +page.svelte

<svelte:options runes />
<script lang="ts">
  import Test from "$components/test/test.svelte";
</script>

<Test>
  {#snippet randomSnippet()}
    <button>hello</button>
  {/snippet}
</Test>

Logs

ReferenceError: $writableSnippet is not defined

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 5.99 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.27 => 5.0.0-next.27

Severity

blocking an upgrade

[brunnerh]

A workaround is to unwrap the snippet in question first.
In the script via $derived or in the template via a {@const ...}, e.g.

const snippet = $derived($writableSnippet);

{#if snippet}
	{@render snippet()}
{/if}

---

{#if $writableSnippet}
	{@const snippet = $writableSnippet}
	{@render snippet()}
{:else}

Related issues on current syntax limitations:

• Svelte 5: Allow more flexibility for @render tag expressions #9582
• Svelte 5: Optional chaining for snippets thoughts  #9871

[HighFunctioningSociopathSH]

A workaround is to unwrap the snippet in question first. In the script via $derived or in the template via a {@const ...}, e.g.

const snippet = $derived($writableSnippet);

{#if snippet}
	{@render snippet()}
{/if}

{#if $writableSnippet}
	{@const snippet = $writableSnippet}
	{@render snippet()}
{:else}

Related issue on current syntax limitations:

• Svelte 5: Optional chaining for snippets thoughts  #9871

Thanks. {@const} is a good work around.