DEV Community

Manon
Manon

Posted on

1

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 πŸ™Œ

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay