Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
amir2mi opened this issue Apr 6, 2024 · 0 comments
Assignees
Labels
bug Something isn't working Module Federation Related with mf

Comments

@amir2mi
Copy link

amir2mi commented Apr 6, 2024

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 },
          },
        }),
      ],
    },
  },
});
  1. Use one of the exposed modules from host
  2. Start storybook
@amir2mi amir2mi added the bug Something isn't working label Apr 6, 2024
@zllkjc zllkjc self-assigned this Sep 19, 2024
@zllkjc zllkjc added the Module Federation Related with mf label Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Module Federation Related with mf
Projects
None yet
Development

No branches or pull requests

2 participants