Sharescopes do not work

[itd-cba]

Describe the bug

Issue: Module Federation shareScopes Not Working as Expected

Description

We are currently migrating our large application to Module Federation and need to utilize the shareScopes feature because we cannot upgrade all microfrontends to new React versions simultaneously. Our approach is to have a shareScope for each React version currently in use and include all additional dependencies in the same React scope.

However, we are encountering an issue where sharing a scope that is not the "default" is not working. We can see the different scopes in the window.__FEDERATION variable, but two microfrontends using the react19 scope are not sharing their dependencies correctly and end up loading their own React instances.

Current Setup

We have a main app that integrates all remotes. The remotes define their shared dependencies via the rsbuild plugin. The main app registers the remotes at runtime with the following code:

import { registerPlugins, registerRemotes, init } from '@module-federation/enhanced/runtime';

export const registerMicroFrontends = async () => {
  try {
    const microfrontendUrls = await getAllMicrofrontends();

    const remotes = Object.entries(microfrontendUrls).map(([key, value]) => ({
      name: key,
      entry: `${value.baseUrl}/mf-manifest.json`,
    }));

    registerRemotes(remotes);
    registerPlugins([errorHandlingPlugin()]);
  } catch (e) {
    logger.warn('Failed to register (some) microfrontends.', e);
  }
};

The main app defines its shared dependencies at build time using the following configuration:

pluginModuleFederation({
  name: 'appaxolotl',
  dts: false,
  shared: [
    {
      react: { singleton: true, requiredVersion: packageJson.dependencies.react },
      'react-dom': { singleton: true, requiredVersion: packageJson.dependencies['react-dom'] },
    },
  ],
});

For microfrontends that use React 19, we use the following configuration and attempt to leverage the shareScope feature:

pluginModuleFederation({
  name: 'portfoliopenguin',
  dts: false,
  runtimePlugins: [],
  exposes: {
    './bootstrap': './src/bootstrap.tsx',
  },
  shared: [
    {
      react: { singleton: true, requiredVersion: packageJson.dependencies.react, shareScope: 'react19' },
      'react-dom': { singleton: true, requiredVersion: packageJson.dependencies['react-dom'], shareScope: 'react19' },
      '@mui/material': { singleton: false, requiredVersion: packageJson.dependencies['@mui/material'], shareScope: 'react19' },
    },
  ],
});

After the microfrondends got registered by the main app they will be loaded via loadRemote when they are actually needed. The "filterfalcon" gets loaded right after the remotes got registered and the second microfrontend is loaded when its route gets called.

Observed Behavior

At runtime, both React 19 microfrontends have the react19 shareScope, but they do not share dependencies correctly. Here is a snapshot of the window__FEDERATION__SHARE__.

And here the broken part:
Here we can see that both have the same scope but still both load their own dependencies.

Expected Behavior

Microfrontends using the same react19 scope should share the React instance instead of loading separate copies.

Questions

• Are we missing any additional runtime configuration required for shareScopes?

Any guidance or insights would be greatly appreciated!

Used Package Manager

pnpm

System Info

- Module Federation Version: 0.8.9
- React Versions: 18.3.1, 19.0.0
- Build Tool: `rsbuild`

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[itd-cba]

@ScriptedAlchemy can you have a look? the feature is not very documented in detail

[ScriptedAlchemy]

@itd-cba provide a repo

[RichFinn-WTW]

I think I'm seeing this same issue. I'm using nx and we just bumped past 19.5.0 where they started consuming @module-federation's packages. I'm seeing separate scopes as well, and I'm trying to nail down the evidence. Will work towards providing a repo if I can. At a minimum will see if I can get the devtools screenshot like you have, @itd-cba

[zackarychapple]

@RichFinn-WTW if you do end up getting a repo together please feel free to tag me and @Coly010 to take a peek.

[RichFinn-WTW]

@RichFinn-WTW if you do end up getting a repo together please feel free to tag me and @Coly010 to take a peek.

Thanks @zackarychapple - I'm getting closer. I'm able to prove that the issue was introduced in nx 19.5.0. It's behind the __webpack_share_scopes__, but I can't get a debugger to float the value to dig in to the specifics. I'm having to drill into code that's tough to read, even with sourcemaps.

[RichFinn-WTW]

I think I've found it. Not exactly what @itd-cba is seeing, but can prove that remoteUrlDefinitions in nx-angular-mf.js is set in one scope when called via setRemoteDefinitions(definitions) and then is empty in a second scope when loadRemoteModule(remoteName, moduleName) is called later.

We were stuck after having upgraded to nx v20.4.0 (ng 19.1.3) from nx v18.1.2. To continue moving forward we downgraded @nx/angular and @nx/webpack to 19.4.4, leaving everything else at 20.4.0, and removed "@nx/module-federation": "20.4.0". Things are now working fine using the original nx module federation functionality.

I'll work on getting a repo out there that contains branches with the different configurations we have to demonstrate the path we took as well as the issue.

[RichFinn-WTW]

I've created a repository that demonstrates the issue as I see it using nx 20.4.2:

https://github.com/RichFinn-WTW/nx-mfe-scope-issue

The readme sets the stage and describes what's happening. Thanks for taking a look.

@zackarychapple @Coly010