[Bug]: @modern-js/storybook does not implement async boundary to use module federation remotes in storybook

[amir2mi]

Version

System:
    OS: Linux 6.1 Manjaro Linux
    Memory: 15.41 GB
    Container: Yes
  Browsers:
    Chromium: 123.0.6312.86

Details

I have a micro-frontend project which has several remotes that is implemented with rsbuild, to add the storybook I used the @modern-js/storybook package, it works fine. I needed to import some modules from federated remotes, but it gives me this error:

   The loadShareSync function was unable to load react. The react could not be found in testStorybook.
        Possible reasons for failure: 

        1. The react share was registered with the 'get' attribute, but loadShare was not used beforehand.

        2. The react share was not registered with the 'lib' attribute.

As I searched, it seems that it is related to the concept of async boundary that module federation relies on, and I think that the @modern-js/storybook need to implement async boundary to fix this issue.

Note that I also found a package named @module-federation/storybook-addon by @fyodorovandrei.

This plugin creates the bootstrap file at the compile time, as I saw the code here using the webpack-virtual-modules package:

  const virtualModulePlugin = new VirtualModulesPlugin({
    './__entry.js': `import('./__bootstrap.js');`,
    './__bootstrap.js': bootstrap.join('\n'),
  });

Reproduce link

Reproduce Steps

1. Create a new modern.js app with storybook
2. Add the storybook as remote in modern.config.ts using ModuleFederationPlugin 1.5 imported from @rspack/core:

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        new ModuleFederationPlugin({
          name: "testStorybook",
          filename: `static/remoteEntry/test-storybook.js`,
          remotes: {
            host: `host@localhost:8000/static/remoteEntry/host.js`,
          },
          shared: {
            react: { singleton: true },
            "react-dom": { singleton: true },
          },
        }),
      ],
    },
  },
});

3. Use one of the exposed modules from host
4. Start storybook