Migrate from Storybook webpack#

If you are using React / Vue with Storybook and building with webpack 5, you can replace the @storybook/react-webpack5 build with storybook-rsbuild, which is implemented based on Rsbuild and uses Rspack as the underlying bundler. It supports out-of-the-box use, and the documentation can be found at storybook-rsbuild.

Next, we will take React as an example to introduce how to migrate a Storybook webpack 5 project. The migration steps for Vue projects are similar to React.

Update Dependencies#

First, replace @storybook/react-webpack5 with storybook-react-rsbuild (for Vue projects, use storybook-vue3-rsbuild), add @rsbuild/core and @rsbuild/plugin-react (for Vue projects, use @rsbuild/plugin-vue).

npm install storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D

Configure Rsbuild#

Storybook Rsbuild will automatically load the Rsbuild configuration file from the working directory. Install @rsbuild/plugin-react (for Vue projects, install and use @rsbuild/plugin-vue).

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

Update Storybook Configuration#

Refer to the following configuration to modify the main.js configuration of Storybook, and specify 'storybook-react-rsbuild' as the Storybook framework (for Vue projects, use 'storybook-vue3-rsbuild').

export default {
-  framework: '@storybook/react-webpack5'
+  framework: 'storybook-react-rsbuild',
  },

Examples#

The rspack-contrib/storybook-rsbuild repository provides examples of Storybook for React / Vue projects.

Limitations#

Rspack is gradually improving full support for Storybook. Currently, there are some capabilities that are not supported, see storybook-rsbuild - Roadmap for details.