Add storybook to your SvelteKit app

#svelte #storybook #frontend #tips

Pre-requisites:

have a SvelteKit project. You cannot install Storybook on an empty project.

Step 1: at your root project, run npx storybook init. During the installation, you will be asked if you want to run the 'eslintPlugin' migration on your project? Say yes. This is needed for the best Storybook experience.

Step 2: npm run storybook
You will probably get an [ERR_REQUIRE_ESM] error, something like this:

Fix:

in .storybook, rename your main.js file to main.cjs
in main.cjs file, replace this line "preprocess": require("../svelte.config.js").preprocess with preprocess: import('../svelte.config.js').preprocess.

Et voila! Enjoy 🙌