Modern.js
This addon loads a reusable Rsbuild config from your Modern.js configuration file so storybook-builder-rsbuild
reuses the same settings your application already trusts.
Getting started
Explore the Modern.js React example to see the integration in a real project.
Installation
npm install @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D
Install @rsbuild/core
in the same workspace. Without it, the addon cannot read your Modern.js configuration.
Match the version used by @modern-js/app-tools
when possible. If you install a different release, storybook-addon-modernjs
prints a warning with the recommended version.
Setup .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: ['storybook-addon-modernjs'],
framework: ['storybook-react-rsbuild'],
}
export default config
With Module Federation
Review the Module Federation example for a full walkthrough.
Installation
If your Modern.js app uses Module Federation, install @module-federation/storybook-addon
.
npm install @module-federation/storybook-addon -D
Setup .storybook/main.ts
Add the addon and pass the remotes
option manually. Storybook cannot infer it automatically.
import type { StorybookConfig } from 'storybook-react-rsbuild'
import moduleFederationConfig from '../module-federation.config'
const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'storybook-addon-modernjs',
{
name: '@module-federation/storybook-addon',
options: {
remotes: moduleFederationConfig.remotes,
},
},
],
framework: ['storybook-react-rsbuild'],
}
Setup modern.config.ts
When using @module-federation/storybook-addon
, disable moduleFederationPlugin
in modern.config.ts
while Storybook runs.
One approach is to check an environment variable set by your Storybook scripts.
package.json
{
"scripts": {
"storybook": "STORYBOOK=true storybook dev -p 6006"
}
}
modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools'
import { moduleFederationPlugin } from '@module-federation/modern-js'
// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
runtime: {
router: true,
},
plugins: [
appTools({
bundler: 'rspack',
}),
...(process.env.STORYBOOK ? [] : [moduleFederationPlugin()]),
],
})
Limitations
Modern.js has its own plugin system that transforms configuration before handing it to Rsbuild.
Modern.js also processes user configuration internally, performing complex changes before Rsbuild sees the result.
TIP
Therefore, the addon has some limitations in Modern.js.
🎗 Supported Usages
- Modern.js Configuration files
- Modern.js plugins to modify the configuration
- Rsbuild plugins
😪 Unsupported Usages
- Webpack cannot be used, only Rspack is supported.
- SSR configuration will not work in Storybook
- Runtime capabilities, such as
<Link>
navigation
- Modern.js plugins will only call the
config
and resolveConfig
hooks
We now support Storybook through a Storybook addon, not a Storybook framework. As a result, some features of Modern.js are unavailable in Storybook.
If you have any questions or suggestions with Modern.js & Storybook, feel free to contact us.