Many errors with Vite & VS-Code

[dm-de]

Describe the bug

When I use VS Code with Svelte 5, many errors are displayed. This has been the case since the beginning of Svelte 5 and we have reached RC. But the errors are still displayed.

Installation:

npm create vite@latest
(select JS Svelte)
cd [path]
npm install
npm install svelte@next

update main.js:

import { mount } from "svelte";
import "./app.css";
import App from "./App.svelte";
const app = mount(App, { target: document.getElementById("app") });
export default app;

update svelte.config.js for runes mode:

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
  preprocess: vitePreprocess(),
  compilerOptions: { runes: true },
}

check jsconfig.json:

should be enabled:
"checkJs": true

VS Code addon installed:
Svelte for VS Code

Reproduction

===== CODE 1 =====

<script>
	let {
		router = {},
	} = $props()
</script>

<!-- error: Property 'value' does not exist on type 'unknown' -->
{router.value}

===== CODE 2 =====

<script>
	let {
		children,
	} = $props()
</script>

<!-- error: This expression is not callable. Type '{}' has no call signatures. -->
{@render children()}

===== CODE 3 =====

<script>
	let {
		items = [],
	} = $props()

	let items2 = $derived(
		//error: Property 'filter' does not exist on type 'unknown'.
		items ? items.filter(item => !item.hidden && item.value) : []
	)
</script>

===== CODE 4 =====

<script>
	let {
		value = $bindable([]),
	} = $props()

	function click(event, item) {
		//error: Type 'unknown' must have a '[Symbol.iterator]()' method that returns an iterator.
		value = [...value, item.value]
	}
</script>

===== CODE 5 =====

<script>
	let {
		items = [],
	} = $props()
</script>

<!-- Argument of type 'unknown' is not assignable to parameter of type 'ArrayLike<unknown> | Iterable<unknown>'.  -->
{#each items as item}
	{item}
{/each}

===== CODE 6 =====

<script>
	let {
		disabled = false,
		value = $bindable(false),
	} = $props()
</script>

<!-- error: Type 'unknown' is not assignable to type 'boolean'. -->
<input
	type="checkbox"
	{disabled}
	bind:checked={value}
/>

Expected behaviour

Should not display errors

System Info

• OS: Windows
• IDE: VSCode
• Svelte 5

Which package is the issue about?

No response

Additional Information, eg. Screenshots

No response

[dummdidumm]

These errors all happen because you are checking JavaScript but not providing types. Either use typescript or jsdoc to provide types.

Example:

<script>
	/** @type {{ router: { value: any } }} */
	let {
		router = {},
	} = $props()
</script>

<!-- error: Property 'value' does not exist on type 'unknown' -->
{router.value}

[dm-de]

Same code in Svelte 4 do not show errors (in most cases)