Runtime share singleton not work.

[Onlylonger]

Describe the bug

Hub(Consumer) resolve plugin(provider) function which return JSX.Element. which will console.error info below:

I have looked document and add config in hub and plugin. but not work

Reproduction

https://github.com/Onlylonger/ha

Used Package Manager

pnpm

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1
    Memory: 67.20 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.11.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v22.11.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.1.1

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.

[danpeen]

let me check.

[danpeen]

@Onlylonger To solve this problem, let's set shareStrategy: 'loaded-first' in both hub and plugin-a like this:

then it will work:

its origin error is caused by multiple react instances, and something wrong happened in the process of react and react-dom sharing.

[philwronski]

same error here, i tried shareStrategy: 'loaded-first' but it doesn't work. On the other hand, using the react bridge works, but it's not optimal for sharing a component with a state.

[ScriptedAlchemy]

its because you dont have module sharing enabled in the hub project, so the remote brings its own copy because there is none it can see in the host because host is not sharing it.

// pluginModuleFederation({
// name: "hub",
// remotes: {
// "plugin-a": "plugin_a@http://localhost:3001/mf-manifest.json",
// },
// shared: ["react", "react-dom"],
// }),

at runtime you can do this, to provide the hosts imported react to the sharing system.

import React from 'react'
init({
  name: '@demo/main-app',
  remotes: [],
  shared: {
    react: {
      version: '17.0.0',
      scope: 'default',
      lib: () => React,
      shareConfig: {
        singleton: true,
        requiredVersion: '^17.0.0',
      },
    },
    'react-dom': {
      version: '17.0.0',
      scope: 'default',
      lib: () => ReactDOM,
      shareConfig: {
        singleton: true,
        requiredVersion: '^17.0.0',
      },
    },
  },
});

https://module-federation.io/guide/basic/runtime.html

[philwronski]

In my case, the problem comes from nx and This parameter NxRuntimeLibraryControlPlugin https://nx.dev/concepts/module-federation/nx-module-federation-technical-overview#the-nxruntimelibrarycontrolplugin