DEV Community

Manon
Manon

Posted on

Add storybook to your SvelteKit app

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:

Image description

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 🙌

Top comments (0)