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

Running storybook at this moment should give you error. Here are the steps f…


This content originally appeared on DEV Community and was authored by kiranojhanp

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:

  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
    }
};


This content originally appeared on DEV Community and was authored by kiranojhanp


Print Share Comment Cite Upload Translate Updates
APA

kiranojhanp | Sciencx (2022-01-13T06:12:58+00:00) Add storybook.js to a sveltekit project. Retrieved from https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/

MLA
" » Add storybook.js to a sveltekit project." kiranojhanp | Sciencx - Thursday January 13, 2022, https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/
HARVARD
kiranojhanp | Sciencx Thursday January 13, 2022 » Add storybook.js to a sveltekit project., viewed ,<https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/>
VANCOUVER
kiranojhanp | Sciencx - » Add storybook.js to a sveltekit project. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/
CHICAGO
" » Add storybook.js to a sveltekit project." kiranojhanp | Sciencx - Accessed . https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/
IEEE
" » Add storybook.js to a sveltekit project." kiranojhanp | Sciencx [Online]. Available: https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/. [Accessed: ]
rf:citation
» Add storybook.js to a sveltekit project | kiranojhanp | Sciencx | https://www.scien.cx/2022/01/13/add-storybook-js-to-a-sveltekit-project/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts