-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
Describe the bug
When a snippet is defined in the same Svelte component as the render call, the @typescript-eslint/no-confusing-void-expression
ESLint rule throws the following error:

However, when a snippet is defined outside of the component, such as children
, @render has no issues with it. For some reason, snippets defined in the component are typed differently than snippets defined outside and passed in via props.
The main difference I see is that the inline snippets type is ReturnType<import("svelte").Snippet>
whereas children prop type is Snippet
. Because the #snippet/@render is compiled and syntax specific, I have not found a way to disable the rule or work around it, e.g. this is not possible because the svelte compiler doesn't support type declarations in the #snippet call:
<script lang="ts">
import type { Snippet } from 'svelte'
</script>
{#snippet heading(label: string): Snippet}
<h1>{label}</h1>
{/snippet}
{@render heading('Welcome!')}
Reproduction
Install eslint
and @typescript-eslint/eslint-plugin
, enable the rule @typescript-eslint/no-confusing-void-expression
, then use this snippet in a Svelte file:
{#snippet heading(label: string)}
<h1>{label}</h1>
{/snippet}
{@render heading('Welcome!')}
Logs
System Info
System:
OS: macOS 15.6.1
CPU: (14) arm64 Apple M4 Pro
Memory: 1.19 GB / 24.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.15.1 - ~/.asdf/installs/nodejs/22.15.1/bin/node
Yarn: 4.9.3 - ~/.asdf/installs/nodejs/22.15.1/bin/yarn
npm: 10.9.2 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Brave Browser: 139.1.81.136
Chrome: 139.0.7258.139
Safari: 18.6
npmPackages:
svelte: ^5.38.3 => 5.38.3
Severity
annoyance