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
yarn
pnpm
bun
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
yarn
pnpm
bun
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

☎️ Contact Us

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.