Add storybook.js to a sveltekit project

#svelte #storybook #javascript #webdev

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

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

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

rename svelte.config.js to svelte.config.mjs
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
    }
};