Storybook Rsbuild builder already works with a Rspack project.

[fi3ework]

Update 2025/03/07

storybook-rsbuild already support using with a Rspack project, check out https://storybook-rsbuild.netlify.app/guide/integrations/rspack.html and feel free to leave any comments and suggestions.

---

Please use the reaction with 👍 to vote for still creating a separated Rspack bulider with Storybook, and please leave the reason or issue encounter with the current solution.

[Narretz]

This would be really great. For example, if you're migrating a project from webpack to rspack, you don't need rsbuild. But then you want to migrate storybook as well, and you suddenly need rsbuild, which comes with its own dependencies, config file and plugins. I don't think specific rspack frameworks are the way to go, but if storybook-rsbuild could support reading a rspack.config instead of an rsbuild.config, that would be great.

e: I realized that the rspack config of an app will always be somewhat incompatible with storybook. But rsbuild does make it easy to re-use the config you need. Here's for example my minimal vue3 + storybook + rsbuild via rspack config:

import { DefinePlugin } from '@rspack/core';
import { defineConfig } from '@rsbuild/core';
import rspackAppConfig from '../packages/client/rspack.config';
import { VueLoaderPlugin } from 'vue-loader';

export default defineConfig({
  tools: {
    rspack: (config, { mergeConfig }) => {
      const appConfig = rspackAppConfig({});

      return mergeConfig(
        config,
        {
          module: appConfig.module,
          resolve: appConfig.resolve,
          experiments: appConfig.experiments,
          plugins: [new VueLoaderPlugin()],
        },
        {
          resolve: {
            alias: {
             // for string component templates
              vue: 'vue/dist/vue.esm-bundler.js',
            },
          },
          plugins: [
            new DefinePlugin({
              __VUE_OPTIONS_API__: 'true',
              __VUE_PROD_DEVTOOLS__: 'false',
              __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
            }),
          ],
        }
      );
    },
  },
});

Maybe something like this could be added to the docs.

[fi3ework]

Maybe something like this could be added to the docs.

This is a way to use Rspack config with storybook-builder-rsbuild, but it's not verified in many scenes. Rsbuild has many built-in features, so that may cause an implicit difference. Providing Rspack builder is not hard IMO, we're considering to support in the future.

[Narretz]

You are right, my example doesn't actually work when building, only when watching. In build mode, experiments: css extracts the css into chunks, but storybook / rsbuild expects the original chunks for each vue component. Or something like that.

[szimek]

This would be awesome to have. We're trying to migrate a pretty big and old project from webpack to rspack. It all works and the performance is so much better (e.g. hmr time was reduced from ~8s to ~0.5s), but Storybook is unfortunately a blocker for us. Maybe we could keep using webpack just for Storybook for now and use rspack for the app.

[fi3ework]

I'll take a time to check out how to extract the webpack / Rspack configurations from webpack.config.js / rspack.config.js.

TBH, as per #88 (comment). It's possible to achieve of reuse of webpack config, the remaining questions are:

• We need to maintain the current implementation with Rsbuild, even we don't need to use with it, to make the architecture isomorphic. Or, add a layer to work with raw Rspack, and change the Rsbuild on top of it.
• We need to reset some configurations in Rsbuild and preserve the dev server part, as it will be overridden by Storybook anyway.

[Niels-NTG]

I would also like to second this suggestion to make storybook-rsbuild have a much better out-of-the-box experience for Rspack. If that means there needs to be a new separate package called storybook-rspack, so be it.

I've spent too many hours today trying to fix the following build error:

$ npm run storybook

> storybook
> storybook dev -p 6006

@storybook/core v8.5.0

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
Options: { mode: 'storybook' }
=> Failed to build the preview
Error: DefinePlugin looks like a Webpack or Rspack plugin, please use `tools.rspack` to register it:

  // rsbuild.config.ts
  export default {
    tools: {
      rspack: {
        plugins: [new DefinePlugin()]
      }
    }
  };

    at ./node_modules/@rsbuild/core/dist/index.cjs:6853:39
    at Object.addPlugins (./node_modules/@rsbuild/core/dist/index.cjs:6869:22)
    at createRsbuild (./node_modules/@rsbuild/core/dist/index.cjs:7137:21)
    at async Module.start (./node_modules/storybook-builder-rsbuild/dist/index.js:700:24)
    at async storybookDevServer (./node_modules/@storybook/core/dist/core-server/index.cjs:35993:11)
    at async buildOrThrow (./node_modules/@storybook/core/dist/core-server/index.cjs:35027:12)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37183:78)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35750:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

WARN Broken build, fix the error above.

How come Rspack plugins aren't recognised by default? And why does the text suggest a syntax for registering plugins doesn't match the documentation on the RsBuild website? Nevertheless, none of the methods for registering plugins seems to make a difference.

My .storybook/main.js file for reference:

export default {
    stories: [
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [],
    framework: {
        name: 'storybook-html-rsbuild',
        options: {
            builder: {
                rsbuildConfigPath: '.storybook/rspack.storybook.config.mjs',
            },
        },
    },
    core: {
        disableTelemetry: true,
    },
    rsbuildFinal: (config) => {
        return config
    },
}

[fi3ework]

plugins: [new DefinePlugin()]

This should work, Rsbuild supports all Rspack plugins. Could you provide a more detailed config file to help inspecting?

[fi3ework]

In the foreseeable future, I'm not seeing an easy way to align with all @storybook/{react,vue3,...}-webpack5. TBH, it's HIGHLY recommended to use Rsbuild to build a project instead use the low level Rspack.

I understand that there are tons of project can't migrate to Rsbuild in a short time. If the root usage is to use some specific plugins and loaders. That could be added via tools.rspack to modify the underlying Rspack config. I would like to document it out at the current stage.

[Narretz]

In the foreseeable future, I'm not seeing an easy way to align with all @storybook/{react,vue3,...}-webpack5. TBH, it's HIGHLY recommended to use Rsbuild to build a project instead use the low level Rspack.

Then it was imo a strategic mistake to advertise rspack as a (more or less) webpack drop-in replacement if you actually wanted people to use rsbuild because it's more high level. It just makes more sense for existing projects to switch from webpack to rspack if you are used to the complexity of webpack.

[fi3ework]

Then it was imo a strategic mistake to advertise rspack as a (more or less) webpack drop-in replacement if you actually wanted people to use rsbuild because it's more high level. It just makes more sense for existing projects to switch from webpack to rspack if you are used to the complexity of webpack.

It's 100% correct that Rspack is a drop-in replacement of webpack. The main issue is webpack / Rspack is too complex to config a decent project for users from the scratch (the existing webpack projects is a historical topic), but a super flexible tool for higher level build tools (Rsbuild). For common users, it's better to use Rsbuild to avoid complex configurations.