close
  • English

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

      npm
      yarn
      pnpm
      bun
      deno
      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').

      .storybook/main.js
      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.