Support for storybook / rsbuild / module federation setup

[nate-summercook]

Hello there

I've got a project that makes use of module federation (just migrated from webpack to rsbuild) but now I can't get storybook to properly start up with my module federation dependency configured.
Here's the relevant part of my storybook / rsbuild config:

{
...
framework: 'storybook-react-rsbuild',
  rsbuildFinal: (config) => {
    return mergeRsbuildConfig(config, {
      plugins: [pluginReact()],
      moduleFederation: {
        options: {
          name: '_my_library',
          filename: '_my_library.js',
          remotes: {
            _my_remote: '_my_remote@http://localhost:3050/_my_remote.js',
          },
          shared: {
            react: { singleton: true },
            'react-dom': { singleton: true },
          },
        },
      },
    });
  },
}

I don't think this library supports this usecase yet, as I'm getting errors after starting up the app.

The loadShareSync function was unable to load react. The react could not be found in _my_library.
        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.

When using webpack, I've managed to get module federation imports working by using storybook-module-federation. I suspect that this doesn't work yet because of the missing initial dynamic import. That seems to have been the issue with this similar issue here
So if I'm doing something wrong in using module federation together with storybook / rsbuild, please provide a working example or some guidance here. If it's not yet supported at all, please consider implementing it soon ❤️

[fi3ework]

The plugin is using webpack-virtual-modules https://github.com/robdonn/storybook-module-federation/blob/main/src/main.ts#L1 here, which is not supported by Rspack as of now (see https://www.rspack.dev/api/javascript-api#custom-file-systems)

[nate-summercook]

What does that mean in the end? Nothing is being done about this currently and we have to wait for rspack to support what is needed to get this working?

[artieeez]

I was able to get it working by injecting the dynamic import into the entry point of my bundle, similar to how it's done in storybook-module-federation, but using the rspack-plugin-virtual-module instead.

I’m planning to create a PR for storybook-module-federation to add support for Rspack. However, it might take some time as this will be my first contribution to open source. Feel free to reach out if you need more clarification or if you'd like to help with the PR.

[fi3ework]

@artieeez Nice try, while Rspack is trying to implement the built-in virtual module support in the near future. I think we could wait for that and contribute it to https://github.com/robdonn/storybook-module-federation. At the moment, may I know how you're implementing this now, but forking or some other ways?

[artieeez]

@fi3ework , understood. I’ll hold off on that plan for now.
Here’s how I implemented it:
https://github.com/artieeez/storybook-rsbuild-virtual-module-example

@nate-summercook , feel free to use this approach until a more robust solution becomes available.

A quick note: I attempted using the Hoisted Runtime, but unfortunately, it didn’t work as expected.

[fi3ework]

Good news: we got https://module-federation.io/guide/start/npm-packages.html#module-federationstorybook-addon now, you could give it a try.

[nate-summercook]

That sounds nice, however this only supports storybook v7, not v8. Opened an issue there: module-federation/core#3217

[fi3ework]

The addon support v8 IIUC, PLAT @nyqykk.

[nate-summercook]

Not from what I see. Also I tried it and got warnings

After that, the build fails because it tries to source the node_modules/.federation/storybook-bootstrap.js file, which should be written by the addon, but fails because the folder doesn't exist (and it doesn't create it). When I fix that by creating the folder in my storybook main.ts, I get further errors, that RspackModuleFederationPlugin is registered twice. probably the addon is not meant for mf v1.5 ;) I'll investigate further...

[nyqykk]

The folder doesn't exist is normal in mf 1.5, i can fix it. But i think there shouldn't be any other problems except this. Can you provide a repo? @nate-summercook

[nyqykk]

The best way is to upgrade to MF2.0, that's a great version

[nyqykk]

The folder doesn't exist is normal in mf 1.5, i can fix it. But i think there shouldn't be any other problems except this. Can you provide a repo? @nate-summercook

module-federation/core#3222

[nate-summercook]

Yes, I am trying the migration to v2.0, with some progress. Would still be nice to migrate the storybook addon properly to storybook v8, so that the warning disappears ;)

[fi3ework]

It works with storybook8 actually, we had built some projects with it. There is something wrong in the package.json dependencies declaration. I will fix it.