Using storybook as module federation host is not possible

Describe the bug

If I add Module Federation plugin to webpack config, the storybook breaks with error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react.

This happens when there’s no import('./bootstrap') in entry point, see webpack docs: https://webpack.js.org/concepts/module-federation/#troubleshooting

To Reproduce

Run

$ yarn add webpack @storybook/builder-webpack5 -D

Add following code to .storybook/main.js:

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  stories: ["../src/**/*.stories.js"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links"
  ],
  core: {
    builder: "webpack5"
  },
  webpackFinal: async (config) => {
    config.plugins.push(
      new ModuleFederationPlugin({
        name: "ringcentral_whiteboard_storybook",
        shared: {
          react: {
            import: "react", // the "react" package will be used a provided and fallback module
            shareKey: "react", // under this name the shared module will be placed in the share scope
            shareScope: "default", // share scope with this name will be used
            singleton: true // only a single version of the shared module is allowed},
          },
          "react-dom": { singleton: true }
        }
      })
    );
    return config;
  }
};

Here’s the codesandbox: https://codesandbox.io/s/storybook-module-federation-5v2n3

[robdonn]

There is now a library on NPM for enabling module federation for Storybook. The GitHub repo has examples for using Storybook as either a host or a remote.

https://github.com/robdonn/storybook-module-federation

[richardklotz]

Not Ideal, but I got around it for now by adding react and react-dom to webpack externals, then loaded them globally in preview-head.html