@module-federation/storybook-addon NPM

Storybook addon for Module Federation

This addon enables to consume remote Module Federated apps/components

Install

# with NPM
npm install @module-federation/storybook-addon

# with Yarn
yarn add @module-federation/storybook-addon

Configuration

In file ./storybook/main.js:

const moduleFederationConfig = {
  // Module Federation config
};

const storybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    // other addons,
    {
      name: '@module-federation/storybook-addon',
      options: {
        moduleFederationConfig,
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
  },
};

module.exports = storybookConfig;

Rsbuild App or Rslib Module

import { dirname, join } from 'node:path';
import type { StorybookConfig } from 'storybook-react-rsbuild';

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  framework: {
    name: getAbsolutePath('storybook-react-rsbuild'),
    options: {},
  },
  addons: [
    {
      name: '@module-federation/storybook-addon/preset.js',
      options: {
        // add remote here and then you can load remote in your story
        remotes: {
          'rslib-module':
            'rslib-module@http://localhost:3000/mf/mf-manifest.json',
        },
      },
    },
  ],
};

export default config;

For the NX projects:

Replace NX utils withModuleFederation in webpack.config.js with our utils withModuleFederation. Example:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@module-federation/storybook-addon');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));

In file ./storybook/main.js:

const nxModuleFederationConfig = {
  // Module Federation config
};

const storybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    // other addons,
    {
      name: '@module-federation/storybook-addon',
      options: {
        nxModuleFederationConfig,
      },
    },
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
  },
};

module.exports = storybookConfig;

Usage

import React, { Suspense } from 'react';

const LazyButton = React.lazy(() => import('remote/Button'));

const Button = (props) => (
  <Suspense fallback={<p>Please wait...</p>}>
    <LazyButton {...props} />
  </Suspense>
);

export default {
  title: 'ModuleFederation/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary'],
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({ variant: 'primary' });
Primary.args = {
  variant: 'primary',
  children: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
  children: 'Button',
};

module-federation typescript storybook rsbuild storybook-rsbuild addon

@module-federation/enhanced @module-federation/sdk

@everything-registry/sub-chunk-613

0.0.0-next-20250323051630

7 months ago

0.0.0-next-20241113073608

12 months ago

0.0.0-next-20250523061743

5 months ago

0.0.0-next-20250612082515

4 months ago

0.0.0-next-20250403063747

7 months ago

0.0.0-next-20250223132729

8 months ago

0.0.0-next-20241112074706

12 months ago

0.0.0-next-20250324033412

7 months ago

0.0.0-next-20241115035905

11 months ago

0.0.0-next-20250324074608

7 months ago

0.0.0-next-20250220104637

8 months ago

0.0.0-next-20241230030326

10 months ago

0.0.0-next-20241118095355

11 months ago

0.0.0-next-20250328121722

7 months ago

0.0.0-next-20241121062244

11 months ago

0.0.0-next-20250219082408

8 months ago

0.0.0-next-20250305100230

8 months ago

0.0.0-next-20250218110948

8 months ago

0.0.0-next-20250314131019

7 months ago

0.0.0-next-20241113082541

12 months ago

0.0.0-next-20250327064442

7 months ago

0.0.0-next-20250611100258

5 months ago

0.0.0-next-20250223121731

8 months ago

0.0.0-next-20241118100312

11 months ago

4.0.5

8 months ago

0.0.0-next-20250219100104

8 months ago

0.0.0-next-20250109083623

10 months ago

8 months ago

8 months ago

8 months ago

9 months ago

0.0.0-next-20241126032801

11 months ago

4.0.0

10 months ago

4.0.3

9 months ago

4.0.2

9 months ago

0.0.0-next-20250413134017

6 months ago

0.0.0-next-20250527112400

5 months ago

0.0.0-next-20250305085339

8 months ago

0.0.0-next-20241224132836

10 months ago

0.0.0-next-20250407024707

7 months ago

0.0.0-next-20250324130015

7 months ago

0.0.0-next-20250606044946

5 months ago

0.0.0-next-20250526074234

5 months ago

0.0.0-next-20250226030559

8 months ago

0.0.0-next-20250408024819

7 months ago

4.0.9

7 months ago

4.0.8

7 months ago

0.0.0-next-20250121111439

9 months ago

0.0.0-next-20250530022859

5 months ago

0.0.0-next-20250523095839

5 months ago

0.0.0-next-20250305075427

8 months ago

0.0.0-next-20250224065855

8 months ago

0.0.0-next-20250126073514

9 months ago

0.0.0-next-20250522105937

5 months ago

0.0.0-next-20250224065053

8 months ago

0.0.0-next-20250612075655

4 months ago

0.0.0-next-20250327053300

7 months ago

0.0.0-next-20241105130705

12 months ago

0.0.0-next-20241108091829

12 months ago

0.0.0-next-20241216122636

10 months ago

0.0.0-next-20250110094517

10 months ago

0.0.0-next-20250324071001

7 months ago

0.0.0-next-20241126061428

11 months ago

0.0.0-next-20250530043044

5 months ago

0.0.0-next-20250523112943

5 months ago

0.0.0-next-20241224035007

10 months ago

0.0.0-next-20241112091020

12 months ago

0.0.0-next-20250218022700

8 months ago

0.0.0-next-20241216024258

10 months ago

0.0.0-next-20250403063151

7 months ago

0.0.0-next-20250219033929

8 months ago

0.0.0-next-20250416043414

6 months ago

0.0.0-next-20250126041131

9 months ago

0.0.0-next-20250108100218

10 months ago

0.0.0-next-20241226090607

10 months ago

4.0.19

5 months ago

0.0.0-next-20250607130731

5 months ago

0.0.0-next-20250313034018

8 months ago

0.0.0-next-20250527065931

5 months ago

0.0.0-next-20250317113218

7 months ago

0.0.0-next-20250523083317

5 months ago

0.0.0-next-20250305092648

8 months ago

0.0.0-next-20250522125627

5 months ago

0.0.0-next-20250314065230

7 months ago

0.0.0-next-20250221091229

8 months ago

0.0.0-next-20250612085542

4 months ago

4.0.20

5 months ago

0.0.0-next-20241117192957

11 months ago

0.0.0-next-20250422062439

6 months ago

0.0.0-next-20250416061914

6 months ago

0.0.0-next-20250327061542

7 months ago

0.0.0-next-20250108122618

10 months ago

0.0.0-next-20241113030718

12 months ago

0.0.0-next-20250523070931

5 months ago

3.0.4

12 months ago

0.0.0-next-20241105094630

12 months ago

3.0.3

12 months ago

0.0.0-next-20250303114903

8 months ago

3.0.2

12 months ago

0.0.0-next-20250306125957

8 months ago

0.0.0-next-20250515032632

5 months ago

3.0.8

11 months ago

0.0.0-next-20241106024856

12 months ago

0.0.0-next-20241105074545

12 months ago

3.0.6

12 months ago

0.0.0-next-20241113100451

12 months ago

3.0.5

12 months ago

0.0.0-next-20250115034449

9 months ago

0.0.0-next-20241230094715

10 months ago

0.0.0-next-20241212065455

11 months ago

0.0.0-next-20241119071808

11 months ago

0.0.0-next-20250108131211

10 months ago

0.0.0-next-20241216131539

10 months ago

0.0.0-next-20250607144225

5 months ago

0.0.0-next-20250321094426

7 months ago

4.0.10

7 months ago

0.0.0-next-20250318025453

7 months ago

0.0.0-next-20250306071320

8 months ago

0.0.0-next-20250526025159

5 months ago

0.0.0-next-20250421062338

6 months ago

4.0.16

5 months ago

0.0.0-next-20250428032809

6 months ago

6 months ago

5 months ago

5 months ago

7 months ago

0.0.0-next-20250310194348

8 months ago

4.0.11

7 months ago

0.0.0-next-20250321010713

7 months ago

4.0.14

6 months ago

4.0.13

6 months ago

0.0.0-next-20250401085244

7 months ago

0.0.0-next-20250306064243

8 months ago

0.0.0-next-20250321011937

7 months ago

0.0.0-next-20250122001059

9 months ago

0.0.0-next-20241104091124

12 months ago

0.0.0-next-20241212123451

11 months ago

0.0.0-next-20241114041727

11 months ago

0.0.0-next-20250223102601

8 months ago

0.0.0-next-20241118091452

11 months ago

0.0.0-next-20250609065828

5 months ago

0.0.0-next-20241118092546

11 months ago

0.0.0-next-20250108134931

10 months ago

0.0.0-next-20241113115843

12 months ago

0.0.0-next-20241106033302

12 months ago

0.0.0-next-20250107032147

10 months ago

0.0.0-next-20250328101836

7 months ago

0.0.0-next-20250325035711

7 months ago

0.0.0-next-20250312063503

8 months ago

0.0.0-next-20250221033208

8 months ago

0.0.0-next-20250410121036

7 months ago

3.0.9

11 months ago

0.0.0-next-20241224092514

10 months ago

0.0.0-next-20241105103421

12 months ago

0.0.0-next-20250306063156

8 months ago

0.0.0-next-20241106063644

12 months ago

0.0.0-next-20250305094132

8 months ago

0.0.0-next-20250523110447

5 months ago

0.0.0-next-20250312104826

8 months ago

0.0.0-next-20250109101432

10 months ago

0.0.0-next-20241224161508

10 months ago

0.0.0-next-20250314105429

7 months ago

0.0.0-next-20250523091841

5 months ago

0.0.0-next-20250109082157

10 months ago

0.0.0-next-20241230025944

10 months ago

0.0.0-next-20250108100522

10 months ago

0.0.0-next-20250603084223

5 months ago

0.0.0-next-20250226062503

8 months ago

0.0.0-next-20250603082728

5 months ago

0.0.0-next-20241230092840

10 months ago

0.0.0-next-20250219103339

8 months ago

0.0.0-next-20241218082038

10 months ago

0.0.0-next-20241107072243

12 months ago

0.0.0-next-20241112220116

12 months ago

0.0.0-next-20250317122806

7 months ago

0.0.0-next-20241224163615

10 months ago

0.0.0-next-20250324095009

7 months ago

0.0.0-next-20241105091216

12 months ago

0.0.0-next-20250217085536

8 months ago

0.0.0-next-20250305095557

8 months ago

0.0.0-next-20250106094134

10 months ago

0.0.0-next-20250402032411

7 months ago

0.0.0-next-20241213035216

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

0.0.0-next-20250410080317

7 months ago

0.0.0-next-20250310022208

8 months ago

3.0.17

10 months ago

0.0.0-next-20241114094904

11 months ago

0.0.0-next-20250327052500

7 months ago

3.0.14

11 months ago

3.0.15

11 months ago

0.0.0-next-20241205062623

11 months ago

0.0.0-next-20250318071756

7 months ago

0.0.0-next-20250109080507

10 months ago

0.0.0-next-20250324124529

7 months ago

0.0.0-next-20250415111630

6 months ago

0.0.0-next-20241213035213

11 months ago

0.0.0-next-20250226030124

8 months ago

0.0.0-next-20250314085950

7 months ago

0.0.0-next-20241113075051

12 months ago

0.0.0-next-20241114065146

11 months ago

0.0.0-next-20250408084324

7 months ago

0.0.0-next-20250306064836

8 months ago

0.0.0-next-20250325025859

7 months ago

0.0.0-next-20241121080744

11 months ago

0.0.0-next-20250328075155

7 months ago

0.0.0-next-20241225063631

10 months ago

0.0.0-next-20250604101744

5 months ago

0.0.0-next-20250311034401

8 months ago

0.0.0-next-20241230085648

10 months ago

0.0.0-next-20250317121011

7 months ago

0.0.0-next-20250313075107

8 months ago

0.0.0-next-20250318021628

7 months ago

0.0.0-next-20241107071851

12 months ago

0.0.0-next-20250121095540

9 months ago

0.0.0-next-20250224060203

8 months ago

0.0.0-next-20241105211652

12 months ago

0.0.0-next-20250304120228

8 months ago

0.0.0-next-20241118060105

11 months ago

0.0.0-next-20250523141144

5 months ago

0.0.0-next-20250108081623

10 months ago

0.0.0-next-20241106110902

12 months ago

0.0.0-next-20241224050117

10 months ago

0.0.0-next-20241112032845

12 months ago

0.0.0-next-20250220101307

8 months ago

0.0.0-next-20250523075729

5 months ago

0.0.0-next-20250403095941

7 months ago

0.0.0-next-20250401063000

7 months ago

0.0.0-next-20250126023024

9 months ago

0.0.0-next-20241104032754

12 months ago

0.0.0-next-20250509064535

6 months ago

0.0.0-next-20250612090406

4 months ago

0.0.0-next-20241218093627

10 months ago

0.0.0-next-20241112091427

12 months ago

0.0.0-next-20250427063235

6 months ago

0.0.0-next-20250313081234

8 months ago

0.0.0-next-20250307021657

8 months ago

0.0.0-next-20241111073908

12 months ago

0.0.0-next-20241115100504

11 months ago

0.0.0-next-20250611085515

5 months ago

0.0.0-next-20250526033636

5 months ago

0.0.0-next-20250103032148

10 months ago

0.0.0-next-20250208115611

9 months ago

0.0.0-next-20241117185051

11 months ago

0.0.0-next-20241230034757

10 months ago

0.0.0-next-20250109032023

10 months ago

0.0.0-next-20250227030328

8 months ago

0.0.0-next-20241127081350

11 months ago

0.0.0-next-20250530043835

5 months ago

0.0.0-next-20250305090619

8 months ago

0.0.0-next-20250228220829

8 months ago

0.0.0-next-20250522124810

5 months ago

0.0.0-next-20250109025056

10 months ago

0.0.0-next-20250523083033

5 months ago

0.0.0-next-20250526062606

5 months ago

0.0.0-next-20250523024839

5 months ago

0.0.0-next-20250414091720

6 months ago

0.0.0-next-20250106092436

10 months ago

0.0.0-next-20250108092019

10 months ago

0.0.0-next-20250530032823

5 months ago

0.0.0-next-20250313030618

8 months ago

0.0.0-next-20250108090515

10 months ago

0.0.0-next-20241212120314

11 months ago

0.0.0-next-20250408064807

7 months ago

0.0.0-next-20250522130707

5 months ago

0.0.0-next-20250321025124

7 months ago

0.0.0-next-20250109131951

10 months ago

0.0.0-next-20250429062839

6 months ago

0.0.0-next-20250214035103

8 months ago

0.0.0-next-20250318025054

7 months ago

0.0.0-next-20250221090527

8 months ago

0.0.0-next-20250221033258

8 months ago

0.0.0-next-20241105102822

12 months ago

0.0.0-next-20241105035816

12 months ago

0.0.0-next-20250304114719

8 months ago

0.0.0-next-20250605022804

5 months ago

0.0.0-next-20250228073351

8 months ago

0.0.0-next-20250407031542

7 months ago

0.0.0-next-20250115025216

9 months ago

0.0.0-next-20241120032055

11 months ago

0.0.0-next-20250523115044

5 months ago

0.0.0-next-20250303022759

8 months ago

0.0.0-next-20250106035038

10 months ago

0.0.0-next-20250219105538

8 months ago

0.0.0-next-20250306073231

8 months ago

0.0.0-next-20250110083557

10 months ago

0.0.0-next-20250407023255

7 months ago

0.0.0-next-20241231075249

10 months ago

0.0.0-next-20250415063928

6 months ago

0.0.0-next-20241117184153

11 months ago

0.0.0-next-20250530040306

5 months ago

0.0.0-next-20250314064640

7 months ago

0.0.0-next-20250321090937

7 months ago

0.0.0-next-20241206040656

11 months ago

0.0.0-next-20250612091126

4 months ago

3.0.18

10 months ago

0.0.0-next-20250526035905

5 months ago

0.0.0-next-20241114091142

11 months ago

0.0.0-next-20250321084248

7 months ago

0.0.0-next-20250304021747

8 months ago

0.0.0-next-20250419044420

6 months ago

0.0.0-next-20250224110717

8 months ago

0.0.0-next-20241105094332

12 months ago

0.0.0-next-20250221081237

8 months ago

0.0.0-next-20241205085800

11 months ago

0.0.0-next-20250603083441

5 months ago

0.0.0-next-20250515032930

5 months ago

0.0.0-next-20250527094526

5 months ago

0.0.0-next-20241105061413

12 months ago

0.0.0-next-20250530041623

5 months ago

0.0.0-next-20250401023940

7 months ago

0.0.0-next-20241129065701

11 months ago

0.0.0-next-20250121103600

9 months ago

0.0.0-next-20250317114255

7 months ago

0.0.0-next-20250208084948

9 months ago

0.0.0-next-20241106104434

12 months ago

0.0.0-next-20250221063001

8 months ago

0.0.0-next-20250523132518

5 months ago

0.0.0-next-20250328031116

7 months ago

0.0.0-next-20250321032801

7 months ago

0.0.0-next-20241106033151

12 months ago

0.0.0-next-20250318055724

7 months ago

0.0.0-next-20250411200445

7 months ago

0.0.0-next-20250113031136

9 months ago

3.0.1

12 months ago

0.0.0-next-20241101074502

12 months ago

0.0.0-next-20241029093536

12 months ago

0.0.0-next-20241030095049

12 months ago

0.0.0-next-20241030074135

12 months ago

0.0.0-next-20241029083753

12 months ago

0.0.0-next-20240806034033

1 year ago

3.0.0

1 year ago

0.0.0-feat-node-support-1702930274548

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago