Storybook for React with Webpack

Storybook for React & Webpack is a framework that makes it easy to develop and test UI components in isolation for React applications built with Webpack.

Install

To install Storybook in an existing React project, run this command in your project's root directory:

npm create storybook@latest

You can then get started writing stories, running tests and documenting your components. For more control over the installation process, refer to the installation guide.

Requirements

• 

  React ≥ 16.8

• 

  Webpack ≥ 5.101

Run Storybook

To run Storybook for a particular project, run the following:

npm run storybook

To build Storybook, run:

npm run build-storybook

You will find the output in the configured outputDir (default is storybook-static).

Configure

Manually initialized apps

If you're working on an app that was initialized manually, ensure that your app has react-dom included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project.

Component documentation

Storybook 11 reads React component props on the server by default, with the typescript package (TypeScript 5.9 or 6, even in JavaScript projects, where it reads types from JSDoc comments). New projects need no docgen configuration and no extra packages.

FAQ

How do I manually install the React Webpack framework?

First, install the framework:

npm install --save-dev @storybook/react-webpack5

Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:

npx storybook@latest add @storybook/addon-webpack5-compiler-swc

or

npx storybook@latest add @storybook/addon-webpack5-compiler-babel

More details can be found in the Webpack builder docs.

Finally, update your .storybook/main.js|ts to change the framework property:

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  // ...
  framework: '@storybook/react-webpack5', // 👈 Add this
});

How do I migrate to the React Vite framework?

Please refer to the migration instructions for @storybook/react-vite.

API

Options

You can pass an options object for additional configuration if needed:

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      // ...
    },
  },
});

builder

Type: Record<string, any>

Configure options for the framework's builder. For this framework, available options can be found in the Webpack builder docs.