DEV Community

kiranojhanp
kiranojhanp

Posted on

Add storybook.js to a sveltekit project

First Create a sveltekit project and initialize storybook.js

1. npm init svelte@next sb-svelte
2. cd sb-svelte
3. npm install
4. npx sb@next init
5. npm run storybook
Enter fullscreen mode Exit fullscreen mode

Running storybook at this moment should give you error. Here are the steps for the fix:

  1. change "type": "commonjs" in package.json

change type to commonjs - Step 1

  1. rename svelte.config.js to svelte.config.mjs

  2. replace your .storybook/main.js with following code:

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
    framework: '@storybook/svelte',
    svelteOptions: {
        preprocess: import('../svelte.config.mjs').preprocess
    }
};

Enter fullscreen mode Exit fullscreen mode

Discussion (0)