sveltekit-storybook-bug

Sveltekit Storybook Bug

Demo of SvelteKit/Storybook bug

https://github.com/sveltejs/kit/issues/7257

If a story component imports '$app/navigation', SvelteKit emits this error when rendering the story:

Cannot read properties of undefined (reading 'disable_scroll_handling')
TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling')
    at http://localhost:6006/node_modules/@sveltejs/kit/src/runtime/app/navigation.js?v=b4aad7c7:14:11

Steps to reproduce

  1. Scaffold new SvelteKit project:

    npm create svelte@latest my-app
    cd my-app
    npm install
    
  2. Add Storybook:

    npx storybook@next init
    
  3. Edit src/stories/Button.svelte to import '$app/navigation':

    <script lang="ts">
      import { goto } from '$app/navigation';
    </script>
    
  4. Run Storybook:

    npm run storybook
    
  5. Open the Button story in the browser.

Top categories

Loading Svelte Themes