FAQ#

Deploy Storybook to a subdirectory / subpath#

The default Vite and webpack builders in Storybook use relative paths for references, whereas Rsbuild does not recommend using relative paths for deployment (See the tips). Therefore, if you want to deploy Storybook on a sub-path such as https://example.com/sb-path, you can achieve this by configuring output.assetPrefix.

const config: StorybookConfig = {
  // --snip--
  rsbuildFinal: (config) => {
+   config.output ??= {}
+   config.output.assetPrefix = '/sb-path/'
    return config
  },
  // --snip--
}

Error caused by bundling unexpected files#

Because Rspack temporarily does not support the webpackInclude magic comment, non-story files may be bundled, which could lead to build failures. These files can be ignored using rspack.IgnorePlugin (see exmaple https://github.com/rspack-contrib/storybook-rsbuild/issues/19).

// .storybook/main.js
import path from 'path'
import { mergeRsbuildConfig } from '@rsbuild/core'

export default {
  framework: 'storybook-react-rsbuild',
  async rsbuildFinal(config) {
    return mergeRsbuildConfig(config, {
      tools: {
        rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
          return mergeConfig(config, {
            plugins: [
              new rspack.IgnorePlugin({
                checkResource: (resource, context) => {
                  // for example, ignore all markdown files
                  const absPathHasExt = path.extname(resource)
                  if (absPathHasExt === '.md') {
                    return true
                  }

                  return false
                },
              }),
            ],
          })
        },
      },
    })
  },
}

Why using getAbsolutePath to resolve the framework in sandboxes in this repository?#

Check out https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments.

How to debug the Rsbuild and Rspack config of the Storybook builder?#

Based on Rsbuild, you can directly use the CLI debug capability provided by Rsbuild for debugging. For example:

In development mode:

DEBUG=rsbuild storybook dev

In production mode:

DEBUG=rsbuild storybook build

Check the output in the CLI, you can see where the Rsbuild and Rspack configuration is dumped on the disk and view it.