Skip to content

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

@brettearle

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions