Skip to content

cannot use variables from <script> as a dynamic component inside of a snippet when <script module> is present #3020

@tijnjh

Description

@tijnjh

Describe the bug

cannot use variables from <script> as a dynamic component inside of a snippet when <script module> is present

Reproduction

i have a Button component which has an icon prop, which i render conditionally based on the iconPosition prop,

this is a simplified version

<script module lang="ts">
  // other stuff
</script>

<script lang="ts">
  const {
    icon: Icon,
    iconPosition = "leading",
    children,
  }: {
    icon: LucideComponent;
    iconPosition?: "leading" | "trailing";
    children: Snippet;
  } = $props();
</script>

{#snippet iconSnippet()}
  <Icon size={16} />
{/snippet}

<button>
  {#if iconPosition === "leading"}
    {@render iconSnippet()}
  {/if}

  {@render children()}

  {#if iconPosition === "trailing"}
    {@render iconSnippet()}
  {/if}
</button>

this should work, but its showing this error

Image

even when it is clearly defined above

Image

the weird thing is, that it works fine when you put it in curly braces inside of the snippet

Image

or when you remove the <script module>

Image

https://svelte.dev/playground/24304238b9e1463dab88b38a06c4f274

Logs

System Info

System:
    OS: macOS 26.4.1
    CPU: (10) arm64 Apple M4
    Memory: 115.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.14.0 - /Users/tijn/.nvm/versions/node/v24.14.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 11.9.0 - /Users/tijn/.nvm/versions/node/v24.14.0/bin/npm
    pnpm: 11.0.3 - /opt/homebrew/bin/pnpm
    bun: 1.3.13 - /opt/homebrew/bin/bun
    Deno: 2.7.14 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 147.0.7727.138
    Firefox: 150.0.1
    Safari: 26.4
  npmPackages:
    svelte: ^5.55.4 => 5.55.4

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions