Module federation: Shared dependencies sourced from remotes rather than host when registered dynamically

[oscar8880]

Current Behavior

My use case is for dynamically loaded remotes based on a manifest. At runtime the host app fetches information about where to load remotes from and uses @module-federation/enhanced/runtime's registerRemotes to register them.

This approach works well except for the fact that with the built app this causes shared dependencies like react to be loaded from the remote, rather than the host. I'd like all remotes to be consuming host's shared dependencies so in future I am able to bump versions and only release host, rather than all applications. The same behaviour does not happen when running the app in dev mode, but keeping everything else the same nx serve host (note: in my example you also need to tweak the mf-manifest.json location to http://localhost:4201/mf-manifest.json in apps/host/src/main.ts).

Note: separate discussion here as to whether this approach is suitable at all: #30275

See here how the react dependency is sourced from 'shop' rather than the expected 'host'.

And the subsequent fetch from the shop directory:

I'm able to reproduce this behaviour with a few lines of changes from a generated module federation example.

Expected Behavior

Shared dependencies should come from host in dev and the production build. It's unclear to me why there should be a difference.

GitHub Repo

https://github.com/oscar8880/nx-module-federation-issues/tree/deps-in-child-issue

Steps to Reproduce

1. Checkout https://github.com/oscar8880/nx-module-federation-issues/tree/deps-in-child-issue
2. Go to branch deps-in-child-issue
3. npm install
4. nx build host
5. Move the built dist/apps/shop inside dist/apps/host
6. cd dist/apps/host
7. Serve the host directory e.g. python -m http.server 8000
8. Navigate to the served site in your browser, e.g. http://localhost:8000
9. Look at the devtools network logs, filter for JS requests, and observe the URL of each file. You should see that dependencies like react are coming from the /shop/ directory, rather than the expected root localhost:8000
10. Alternatively, enter __FEDERATION__ in the dev tools console and open up the react dependency in SHARE, observe that it has the field from as 'shop', rather than 'host'

To create the example I followed the docs here https://nx.dev/concepts/module-federation/faster-builds-with-module-federation. I'm using nx 20.4.6, node v20.10.0, npm 10.2.3.

• npx create-nx-workspace nx-module-federation-issues --preset=apps
• nx add @nx/react
• nx g @nx/react:host apps/host --remotes=shop
• No style choice
• Playwright
• RSPack

Nx Report

Node           : 20.10.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.2.3

nx                     : 20.4.6
@nx/js                 : 20.4.6
@nx/jest               : 20.4.6
@nx/eslint             : 20.4.6
@nx/workspace          : 20.4.6
@nx/devkit             : 20.4.6
@nx/eslint-plugin      : 20.4.6
@nx/module-federation  : 20.4.6
@nx/playwright         : 20.4.6
@nx/react              : 20.4.6
@nx/rspack             : 20.4.6
@nx/web                : 20.4.6
typescript             : 5.7.3

Failure Logs

N/A

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response