#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

yarn add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

pnpm add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

bun add @rsbuild/core storybook-builder-rsbuild storybook-addon-modernjs -D

deno add npm:@rsbuild/core npm:storybook-builder-rsbuild npm: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

yarn add @module-federation/storybook-addon -D

pnpm add @module-federation/storybook-addon -D

bun add @module-federation/storybook-addon -D

deno add npm:@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.

{
  "scripts": {
    "storybook": "STORYBOOK=true storybook dev -p 6006"
  }
}

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.

#🎗 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.

• GitHub
• Modern.js Discord