Registry /
web-framework / storybook-react-rsbuild
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
StorybookConfig
✓ import type { StorybookConfig } from 'storybook-react-rsbuild';
✗ import { StorybookConfig } from 'storybook-react-rsbuild'; // Incorrect for type-only import
Used for type-checking your `.storybook/main.ts` configuration file, ensuring adherence to the Storybook configuration schema specific to the Rsbuild framework.
framework.name
✓ framework: { name: '@storybook/react-rsbuild', options: {} }
✗ framework: '@storybook/react-webpack5', // Uses the wrong Storybook builder
This string literal is used within your `.storybook/main.js` or `.storybook/main.ts` file to specify that Storybook should use the `storybook-react-rsbuild` framework and builder.
mergeRsbuildConfig
✓ import { mergeRsbuildConfig } from '@rsbuild/core';
✗ import { mergeRsbuildConfig } from 'storybook-react-rsbuild'; // Not exported by this package
While not directly from `storybook-react-rsbuild`, `mergeRsbuildConfig` from `@rsbuild/core` is crucial for customizing the underlying Rsbuild configuration within the `rsbuildFinal` function in `main.ts` to prevent direct mutation issues.
This quickstart demonstrates how to configure Storybook to use `storybook-react-rsbuild` as its framework, define a simple React component, and create its corresponding Storybook stories in TypeScript. It also includes an example of customizing the underlying Rsbuild configuration.
import type { StorybookConfig } from 'storybook-react-rsbuild';
import { mergeRsbuildConfig } from '@rsbuild/core';
// .storybook/main.ts
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-rsbuild',
options: {},
},
docs: {
autodocs: 'tag',
},
// Example of customizing Rsbuild config
rsbuildFinal: async (currentConfig, { configType }) => {
if (configType === 'PRODUCTION') {
return mergeRsbuildConfig(currentConfig, {
performance: { removeConsole: true },
});
}
return currentConfig;
},
};
export default config;
// src/components/Button.tsx
import React from 'react';
interface ButtonProps {
label: string;
primary?: boolean;
onClick?: () => void;
}
export const Button: React.FC<ButtonProps> = ({ label, primary = false, onClick }) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button type="button" className={['storybook-button', mode].join(' ')} onClick={onClick}>
{label}
</button>
);
};
// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
title: 'Example/Button',
tags: ['autodocs'],
argTypes: {
backgroundColor: { control: 'color' },
},
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary: Story = {
args: {
label: 'Button',
},
};
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'getStatus') at ModuleLoader.getModuleJobForRequire
This error can occur with specific Node.js versions (e.g., Node.js 22.18.0) due to changes in Node.js's ESM loader, affecting how Storybook builders resolve modules.
fixReview the Node.js compatibility requirements for your Storybook and `storybook-react-rsbuild` versions. Consider downgrading Node.js or checking for official workarounds/updates from Storybook or Rsbuild.
Module not found: Error: Can't resolve '@storybook/react-rsbuild' in '.../.storybook'
The `storybook-react-rsbuild` package is not installed or incorrectly referenced in your project's `node_modules`.
fixEnsure the package is installed as a dev dependency: `npm install --save-dev storybook-react-rsbuild` or `yarn add --dev storybook-react-rsbuild`. Verify the package name in `.storybook/main.js` or `.storybook/main.ts` is `"@storybook/react-rsbuild"` (with the '@' scope).
Error: Storybook's React preset is not compatible with Storybook v9. Please upgrade to Storybook v10.
This error indicates a version mismatch between `storybook-react-rsbuild` (which is for Storybook v10+) and an older Storybook core installation.
fixUpgrade all Storybook-related packages in your project to v10 or later. Run `npx storybook@latest upgrade` and then ensure `storybook-react-rsbuild` is also updated to its latest compatible version.
Audit
Dependencies
@rsbuild/corerequiredEssential for the Rsbuild build system integration with Storybook. The package depends on specific versions for compatibility.
reactrequiredCore React library, required for developing React components and Storybook's React renderer.
react-domrequiredReact's DOM-specific rendering library, crucial for mounting React components in the browser.
storybookrequiredThe core Storybook package, providing the main UI and component development environment.
typescriptoptionalRequired for type-checking and proper integration in TypeScript projects, especially for configuration files.