close

    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
    deno
    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

    .storybook/main.ts
    import type { 
    import StorybookConfig
    StorybookConfig     } from 'storybook-react-rsbuild'    

const 
    const config: StorybookConfig
    config    : 
    import StorybookConfig
    StorybookConfig     = {    
  
    stories: string[]
    stories    : ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],    
  
    addons: string[]
    addons    : ['storybook-addon-modernjs'],    
  
    framework: string[]
    framework    : ['storybook-react-rsbuild'],    
}
export default 
    const config: StorybookConfig
    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
    deno
    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.

    .storybook/main.ts
    import type { 
    import StorybookConfig
    StorybookConfig     } from 'storybook-react-rsbuild'    
// import moduleFederationConfig from '../module-federation.config'
const 
    const moduleFederationConfig: {
    remotes: {};
}
    moduleFederationConfig     = { 
    remotes: {}
    remotes    : {} }    

const 
    const config: StorybookConfig
    config    : 
    import StorybookConfig
    StorybookConfig     = {    
  
    stories: string[]
    stories    : ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],    
  
    addons: (string | {
    name: string;
    options: {
        remotes: {};
    };
})[]
    addons    : [    
    'storybook-addon-modernjs',
    {
      
    name: string
    name    : '@module-federation/storybook-addon',    
      
    options: {
    remotes: {};
}
    options    : {    
        
    remotes: {}
    remotes    : 
    const moduleFederationConfig: {
    remotes: {};
}
    moduleFederationConfig    .
    remotes: {}
    remotes    ,    
      },
    },
  ],
  
    framework: string[]
    framework    : ['storybook-react-rsbuild'],    
}
export default 
    const config: StorybookConfig
    config

    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.