If you are using the React framework of Storybook 7.0 and building with Webpack 5, you can replace the @storybook/react-webpack5
with @modern-js/storybook, which supports Rspack as an out-of-the-box underlying build tool. Documentation can be referred to at Modern.js - Using Storybook.
First, we need to add the @modern-js/storybook
dependency and remove the webpack
dependency.
Refer to the following configuration, modify the main.js
configuration of Storybook, and specify Rspack as the build tool:
Here is an example of building Storybook with Rspack based on @modern-js/storybook: react-storybook.
Support for Storybook 7.0 is still experimental, and there are currently some limitations:
Support for frameworks other than React is not yet available.
Support for Next.js is not available, as Next.js has its own build solution.
If you find the build speed is very slow, check if the automatic documentation generation feature is enabled. For the highest performance, configure it to react-docgen
. The difference between react-docgen
and react-docgen-typescript
is that the former is based on Babel, while the latter is based on TypeScript. The former has better performance, but weaker type inference capabilities. If using Rspack to build, only react-docgen
is supported.
We plan to provide a framework-agnostic builder based on Rsbuild to integrate with the framework, refer to rsbuild#1974.