[Bug]: Sveltekit JS template causes issues with built in svelte scripts in sveltekit projects

[brettearle]

Describe the bug

The TS template uses empty state for the in Page.svelte which causes no issues.
The JS template uses null which is throwing type errors in the built in sveltekit check script.

Proposed fix would be to remove null from 'user' state in .../frameworks/sveltekit/template/cli/js/Page.svelte and align with the TS template using empty state
ie

<script>
// ....
	let user = $state();
</script>

<article>
	<Header
		{user}
		onLogin={() => (user = { name: 'Jane Doe' })}
		onLogout={() => (user = undefined)}
		onCreateAccount={() => (user = { name: 'Jane Doe' })}
	/>
//....
</article>

Reproduction link

https://github.com/brettearle/storybook_sveltekit_bug

Reproduction steps

1. git clone [email protected]:brettearle/storybook_sveltekit_bug.git
2. cd into storybook_sveltekit_bug
3. npm run check

This should reproduce these errors

⮞  npm run check

> [email protected] check
> svelte-kit sync && svelte-check --tsconfig ./jsconfig.json


====================================
Loading svelte-check in workspace: /home/brett/PLEASEDELETEME
Getting Svelte diagnostics...

.../src/stories/Page.svelte:10:6
Error: Type 'null' is not assignable to type '{ name: string; } | undefined'. (js)
  <Header
    {user}
    onLogin={() => (user = { name: 'Jane Doe' })}


.../src/stories/Page.svelte:11:21
Error: Type '{ name: string; }' is not assignable to type 'null'. (js)
    {user}
    onLogin={() => (user = { name: 'Jane Doe' })}
    onLogout={() => (user = null)}


.../src/stories/Page.svelte:13:29
Error: Type '{ name: string; }' is not assignable to type 'null'. (js)
    onLogout={() => (user = null)}
    onCreateAccount={() => (user = { name: 'Jane Doe' })}
  />

System

Storybook Environment Info:

System:
OS: Linux 6.12 Pop!_OS 22.04 LTS
CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm <----- active
pnpm: 10.8.1 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
Browsers:
Chrome: 135.0.7049.114
npmPackages:
@storybook/addon-essentials: ^8.6.12 => 8.6.12
@storybook/addon-svelte-csf: ^5.0.0-next.0 => 5.0.0
@storybook/blocks: ^8.6.12 => 8.6.12
@storybook/experimental-addon-test: ^8.6.12 => 8.6.12
@storybook/svelte: ^8.6.12 => 8.6.12
@storybook/sveltekit: ^8.6.12 => 8.6.12
@storybook/test: ^8.6.12 => 8.6.12
storybook: ^8.6.12 => 8.6.12

Additional context

I'm happy to sort this out if proposed fix is accepted

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
The issue can be fixed by modifying the Page.svelte template in the SvelteKit JavaScript template. The file should be updated to match the TypeScript template's approach: Location: frameworks/sveltekit/template/cli/js/Page.svelte Change: svelte let user = $state(null); To: svelte let user = $state(); And update the logout handler from: svelte onLogout={() => (user = null)} To: svelte onLogout={() => (user = undefined)} This aligns with the TypeScript template and resolves the type checking errors in SvelteKit projects.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile