Pure Runtime Host Fails to Initialize Share Scope, React Not Shared (Invalid Hook Call)

[GururajChadaga]

Describe the bug

The repository demonstrates a critical issue with pure runtime Module Federation:

Summary:
when using @module-federation/runtime on the host and plugin-built remoteEntries, the host's share scope is not initialized, leading to multiple React instances and hook errors. The same configuration works as expected when using the build plugin on the host, suggesting an issue in how the runtime API participates (or doesn't) in share scope initialization.

1. The hostbuildtime application (using Module Federation at build time) shows correct initialization of webpack share scopes, and shared dependencies like React work as expected.
2. The hostruntime application attempts to use createInstance from the Module Federation runtime to load remotes (app2, app3) at runtime, but the webpack share scope is empty. This causes React sharing to fail, resulting in an "invalid hook call" error when loading and rendering remote components.

I have tried providing shared dependencies directly under the shared option of createInstance, and also using mf.registerShared, but the problem persists. The share scope object (webpack_share_scopes) remains empty, and singletons like React are not correctly shared.

Brief Reproduction:

1. Clone the repo and install dependencies: npm install
2. Start all applications: npm run start
3. Access the following apps in your browser:

• hostbuildtime: http://localhost:3000/ — works as expected
• hostruntime: http://localhost:3001/ — produces React sharing error on loading a remote widget
• app2: http://localhost:3002/
• app3: http://localhost:3003/

Reproduction

https://github.com/GururajChadaga/mf-dynamic-remotes-pure-runtime

Used Package Manager

npm

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M4
    Memory: 272.31 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.0 - /usr/local/bin/node
    Yarn: 1.22.22 - ~/myorg/myorg/node_modules/.bin/yarn
    npm: 11.4.2 - /usr/local/bin/npm
    pnpm: 10.12.4 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 18.6

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.

[2heal1]

Thanks for so detailed description! It's a little different between runtime config and build config in MF .

You need to add the getter to mf runtime if you are pure runtime scene .

+ import ReactDom from 'react-dom'

 react: {
-     import: "react", // the "react" package will be used a provided and fallback module
-     shareKey: "react", // under this name the shared module will be placed in the share scope
-     shareScope: "default", // share scope with this name will be used
-     singleton: true, // only a single version of the shared module is allowed
 },
  "react-dom": {
-     singleton: true, // only a single version of the shared module is allowed
  },

   react: {
+        version: "18.0.0",
+       scope: "default",
+       lib: ()=> React,
+       shareConfig: {
+           singleton: true,
 +           requiredVersion: "^18.0.0"
          }
      },
      "react-dom": {
+      version: "18.0.0",
+      scope: "default",
+       lib: ()=> ReactDom,
+      shareConfig: {
+         singleton: true,
+        requiredVersion: "^18.0.0"
          }
      }

More detail you can view registerShared usage, the params is the same with createInstance.options.shared

[GururajChadaga]

Thanks for the reply! I checked the type definition for createInstance and saw that we are adding lib/get functions to the type in addition to the ones we pass in build time config, that helped me debug the issue.
might be a good idea to explicitly mention this "modified" API in the docs.

[2heal1]

Yeah good idea , I will add it