Svelte 5: When extracting props from the `$props` rune typescript eslint errors with unsafe assignment, even though the type is defined following the documentation #804
Before You File a Bug Report Please Confirm You Have Done The Following...
[X] I have tried restarting my IDE and the issue persists.
[X] I have updated to the latest version of the packages.
What version of ESLint are you using?
9.5.0
What version of eslint-plugin-svelte are you using?
2.40.0
What did you do?
Configuration
```javascript
import tsParser from "@typescript-eslint/parser";
import svelteParser from "svelte-eslint-parser";
import ts from "typescript-eslint";
import tsPlugin from "@typescript-eslint/eslint-plugin"
import svelteConfig from "./svelte.config.mjs";
export default ts.config(
{
ignores: [
// Root JS and TS (not included in tsconfig.json and I'm lazy)
"*.{js,cjs,mjs}",
"*.{ts,cts,mts}",
],
languageOptions: {
parser: tsParser,
parserOptions: {
project: true,
// `programs` was giving some weird errors even though I wasn't using this config
programs: false,
tsconfigRootDir: import.meta.dirname,
extraFileExtensions: [".svelte"],
},
},
rules: {
'@typescript-eslint/no-unsafe-assignment': 'error'
},
plugins: {
'@typescript-eslint': tsPlugin,
}
},
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: tsParser,
svelteConfig,
},
},
},
{
ignores: [
// IDEs
".vscode/*",
"!.vscode/extensions.json",
"!.vscode/settings.json",
// Autogenerated files
".svelte-kit",
".DS_Store",
"node_modules",
"/build",
"/package",
"*.local",
// Lock files
"pnpm-lock.yaml",
"package-lock.json",
"yarn.lock",
"bun.lockb",
],
},
);
```
<script lang="ts">
import type { Snippet } from "svelte";
interface LayoutProps {
children: Snippet;
}
// This generates the error Unsafe assignment of an `any` value. [@typescript-eslint/no-unsafe-assignment]
let { children }: LayoutProps = $props();
</script>
{@render children()}
I created a new SvelteKit project and configured it with Svelte 5 to use runes. I used Bun as my package manager and runtime. After that I tried to create a layout file and use runes mode, but when setting up the $props so the layout could accept children I wasn't able to type it the same way that the Svelte's documentation uses it. I can work around it by adding as LayoutProps after $props(), but this feels wrong considering the documentation didn't explicitly say to typecast. I have also tested with non-route components and it also happens.
What did you expect to happen?
I expected that when I typed the $props rune exactly as informed by the Svelte 5 preview documentation I would get no errors of unsafe any assignments.
What actually happened?
/home/victor/pessoal/keyboard-visualizer/src/lib/TestComponent.svelte
9:6 error Unsafe assignment of an `any` value @typescript-eslint/no-unsafe-assignment
/home/victor/pessoal/keyboard-visualizer/src/routes/+layout.svelte
9:6 error Unsafe assignment of an `any` value @typescript-eslint/no-unsafe-assignment
✖ 2 problems (2 errors, 0 warnings)
error: "eslint" exited with code 1
It detected getting the props for the component as an unsafe assignment.
Link to GitHub Repo with Minimal Reproducible Example
Before You File a Bug Report Please Confirm You Have Done The Following...
What version of ESLint are you using?
9.5.0
What version of
eslint-plugin-svelteare you using?2.40.0
What did you do?
Configuration
```javascript import tsParser from "@typescript-eslint/parser"; import svelteParser from "svelte-eslint-parser"; import ts from "typescript-eslint"; import tsPlugin from "@typescript-eslint/eslint-plugin" import svelteConfig from "./svelte.config.mjs"; export default ts.config( { ignores: [ // Root JS and TS (not included in tsconfig.json and I'm lazy) "*.{js,cjs,mjs}", "*.{ts,cts,mts}", ], languageOptions: { parser: tsParser, parserOptions: { project: true, // `programs` was giving some weird errors even though I wasn't using this config programs: false, tsconfigRootDir: import.meta.dirname, extraFileExtensions: [".svelte"], }, }, rules: { '@typescript-eslint/no-unsafe-assignment': 'error' }, plugins: { '@typescript-eslint': tsPlugin, } }, { files: ["**/*.svelte", "*.svelte"], languageOptions: { parser: svelteParser, parserOptions: { parser: tsParser, svelteConfig, }, }, }, { ignores: [ // IDEs ".vscode/*", "!.vscode/extensions.json", "!.vscode/settings.json", // Autogenerated files ".svelte-kit", ".DS_Store", "node_modules", "/build", "/package", "*.local", // Lock files "pnpm-lock.yaml", "package-lock.json", "yarn.lock", "bun.lockb", ], }, ); ```I created a new SvelteKit project and configured it with Svelte 5 to use runes. I used Bun as my package manager and runtime. After that I tried to create a layout file and use runes mode, but when setting up the
$propsso the layout could accept children I wasn't able to type it the same way that the Svelte's documentation uses it. I can work around it by addingas LayoutPropsafter$props(), but this feels wrong considering the documentation didn't explicitly say to typecast. I have also tested with non-route components and it also happens.What did you expect to happen?
I expected that when I typed the
$propsrune exactly as informed by the Svelte 5 preview documentation I would get no errors of unsafeanyassignments.What actually happened?
It detected getting the props for the component as an unsafe assignment.
Link to GitHub Repo with Minimal Reproducible Example
https://github.com/victoragcosta/eslint-plugin-svelte-props-unsafe-assignment-repro
Additional comments
Edit: I have tested it now and this also happens if I use
npmandnodeinstead ofbun.