TIL: How to configure Storybook with Vite

Storybook based component development has helped us increase consistency and achieve quicker turn around time for our front-end development. We are currently moving our stack to use Vite (will post on this soon), we have been using react for all for front-end needs, while the process was straight forward, we did face some issues like all JS frameworks to get it working smoothly.

Quick Setup

npx sb init --builder storybook-builder-vite

While this does download and add dependencies the main storybook doesn't run in first go

Issue 1: Incorrect story paths: Do have a look at main.js under .storybook to ensure that the stories are being picked up correctly.

Issue 2

index.js:958 Uncaught ReferenceError: global is not defined

This actually comes from @storybook/addon-interactions plugin, and we disabled this plugin in main.js

This is no longer the case with 0.1.22 @storybook/builder-vite

Issue 3:

The default config also tries to inject the following line into components. We at least have this line in our jsx anyway so we had to comment this out.

import React from 'react'