import { PackageManagerTabs } from '@theme';

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.

:::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.

:::

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).

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').

diff

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

Examples

The rstackjs/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.