website/docs/en/guide/migration/storybook.mdx
import { PackageManagerTabs } from '@theme';
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.
:::info
Storybook Rsbuild requires at least version 8.0 of Storybook. It's highly recommended to upgrade Storybook to the latest version, check Storybook 8's release note for detail changes and migration guide.
:::
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).
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()],
});
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',
},
The rstackjs/storybook-rsbuild repository provides examples of Storybook for React / Vue projects.
This page is a quick start. For the complete migration walkthrough — including handling webpack-dependent addons, mapping common webpack patterns to Rsbuild, and migrating from Vite — see the storybook-rsbuild migration guide.