Getting storybook to work with rspack

[neal-codaio]

Summary

We have a fairly large app that has been using storybook for a while with webpack. We're looking to convert webpack to rspack. Building the storybook works. However, when trying to access anything on http://localhost:6006/ all of the stories are shown, yet when selecting a story, it's not loaded and there's just a spinny. There are no outstanding requests other than the 2 websockets. It's unclear what's going on or what the next step to debug is.

This is using react 18, sb 9.1.5 or 9.1.7 (same), typescript 5.8.3 on a Mac.

Additional information

I've added DEBUG=rspack and the output looks like:

  rsbuild 15:44:13 registering default plugins
  rsbuild 15:44:13 default plugins registered
  rsbuild 15:44:13 initializing plugins
  rsbuild 15:44:13 plugins initialized
  rsbuild 15:44:13 applying modifyRsbuildConfig hook
  rsbuild 15:44:13 applied modifyRsbuildConfig hook
  rsbuild 15:44:13 applying modifyEnvironmentConfig hook (web)
  rsbuild 15:44:13 applied modifyEnvironmentConfig hook (web)
  rsbuild 15:44:13 create dev server
  rsbuild 15:44:13 creating compiler
  rsbuild 15:44:13 applying modifyBundlerChain hook
  rsbuild 15:44:13 applied modifyBundlerChain hook
  rsbuild 15:44:13 applying modifyRspackConfig hook
  rsbuild 15:44:13 applied modifyRspackConfig hook
  rsbuild 15:44:13 compiler created
  rsbuild 15:44:13 create dev server done
  rsbuild 15:44:13 using Rspack v1.5.5
start   build started...
● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit                                                                                    ready   built in 3.12 s
warn    Build warnings: 
⚠ ProvidePlugin:
  │ Conflicting values for 'Buffer' (/Users/XXX/node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js.Buffer !== buffer.Buffer)

⚠ ProvidePlugin:
  │ Conflicting values for 'process' (/Users/XXX/node_modules/.pnpm/process@0.11.10/node_modules/process/browser.js !== process/browser)

success config inspection completed, generated files: 

  - Rsbuild config: /Users/XXX/node_modules/.cache/storybook/f6f6b8ec307aab200b284df9d49385768065713dcaa6cb6519858210f8fd3d56/public/.rsbuild/rsbuild.config.mjs
  - Rspack Config (web): /Users/XXX/node_modules/.cache/storybook/f6f6b8ec307aab200b284df9d49385768065713dcaa6cb6519858210f8fd3d56/public/.rsbuild/rspack.config.web.1758570256323.mjs

╭─────────────────────────────────────────────────────────╮
│                                                         │
│   Storybook 9.1.7 for storybook-react-rsbuild started   │
│   2.85 s for manager and 3.27 s for preview             │
│                                                         │
│    Local:            https://localhost:6006/            │
│    On your network:  https://192.168.1.1:6006/          │
│                                                         │
╰─────────────────────────────────────────────────────────╯

Create a reproduction

No response

[neal-codaio]

I've checked out git clone https://github.com/rspack-contrib/storybook-rsbuild.git and when running pnpm storybook from the storybook-rsbuild/sandboxes/react-18 directory, the example works fine. I assume it's in our config, however, I'm unsure how to go about debugging the config to find the root cause and get everything working.

[dosubot[bot]]

Hi @neal-codaio! I'm Dosu and I’m helping the storybook team.

A few targeted steps should help you debug this:

• First, check your browser console for any errors or warnings when the spinner appears—these often point directly to missing polyfills, import errors, or misconfigurations.
• Compare your generated config files in .cache/storybook/.../public/.rsbuild with those from the working example, especially looking at plugins (like ProvidePlugin), loaders, and polyfills. Conflicting or missing polyfills for process and Buffer are a common source of issues when migrating from webpack to rspack/rsbuild, and your logs already show ProvidePlugin conflicts.
• Run Storybook with --debug and --loglevel debug to surface more detailed logs:

  pnpm storybook -- --debug --loglevel debug
  

• Try removing node_modules and reinstalling dependencies to rule out version mismatches or caching issues.
• If you have custom Storybook, rsbuild, or bundler config (like .storybook/main.js/ts or custom plugins), compare them to the working example and share them here if you want more targeted help.

If none of these steps reveal the issue, try incrementally modifying the working example to match your project—this can help isolate the problematic config or dependency. Let me know what you find in the console or if you spot any major config differences!

For more on debugging and config merging, see Storybook's CLI options and builder docs (the webpack docs are still relevant for general config debugging, even if you're using rspack/rsbuild).

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[neal-codaio]

Sorry, I forgot to mention that there wasn't anything interesting in the browser console, only:

[rsbuild] WebSocket connecting...
hmr.js:85 [rsbuild] WebSocket connected.
hmr.js:47 ⚠ ProvidePlugin:
  │ Conflicting values for 'Buffer' (/Users/XXXnode_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js.Buffer !== buffer.Buffer)
handleWarnings @ hmr.js:47Understand this warning
hmr.js:47 ⚠ ProvidePlugin:
  │ Conflicting values for 'process' (/Users/XXX/node_modules/.pnpm/process@0.11.10/node_modules/process/browser.js !== process/browser)
handleWarnings @ hmr.js:47Understand this warning
9The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.Understand this warning

[pedaars]

can you add your storybook main file i have storybook running with 'storybook-react-rsbuild' so may be able to help

[neal-codaio]

Thanks for your offer. I eventually got it working. The most important fix I think was to add pluginNodePolyfill() to the plugins and also get our other plugins working properly.