Library changes are not hot-reloaded when using ModuleFederation

[parostatkiem]

Current Behavior

When using nx serve to serve my app, changes made to the library used by both of the microfrontends (remotes) which the app contains of are not visible in the browser, unless all apps which use this library are launched in the dev mode. If the host app is served (nx serve host) or host with one remote (nx serve host --devRemotes=cart) changes made to the library are not visible in the browser. If the host app is launched along with both (all) remotes (nx serve host --devRemotes=cart,shop) , the changes made to the library are visible in the browser instantly.

This scales to more remotes which was discovered on the original (private) repository with 5 remotes. All 5 remotes and the host have to be served in the dev mode to allow seeing library changes in the browser.

Expected Behavior

Changes made to the library are visible in the browser in every app (host or remote) which is launched in the dev mode, regardless if other apps are also launched in the dev mode or built/served statically.

Github Repo

https://github.com/parostatkiem/nx-microfrontends-problem

Steps to Reproduce

1. npm ci to install dependencies
2. Launch the host app with only one remote nx serve host --devRemotes=cart --open
3. In the browser, navigate to the Cart route using the list. You should see the text "Welcome to Mylib!" appearing twice because you're seeing the host and the cart apps at the same time.
4. Open libs/mylib/src/lib/mylib.tsx file in the editor, change the Mylib component content to something else, let's say

<h1>Welcome to Mylib!</h1>

into

<h1>Welcome to Mylib and see the changes!</h1>

5. Save the file. The app will reload in the browser but you'll still see the unmodified content produced by the Mylib component.
6. Stop the nx serve process.
7. Launch nx serve host --devRemotes=cart,shop --open
8. In the browser, navigate to the Cart route using the list. You should see the text "Welcome to Mylib and see the changes!" appearing twice because you're seeing the host and the cart apps at the same time.
9. Open libs/mylib/src/lib/mylib.tsx file in the editor, change the Mylib component content to something else, let's say

<h1>Welcome to Mylib and see the changes!</h1>

into

<h1>Welcome to Mylib and see even more changes!</h1>

10. Save the file. The app will reload in the browser and you'll see the modified content.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.12.0
   OS   : darwin arm64
   npm  : 8.19.2
   
   nx : 15.4.4
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.4.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.4.4
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.4.4
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.4.4
   @nrwl/js : 15.4.4
   @nrwl/linter : 15.4.4
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.4.4
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.4.4
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.4.4
   @nrwl/webpack : 15.4.4
   @nrwl/workspace : 15.4.4
   @nrwl/vite : 15.4.4
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

The repository was setup with the commands from the official docs of Nx, which are (with npm install commands skipped):

1. npx create-nx-workspace nx-problem --preset=empty
2. nx g @nrwl/react:host host --remotes=shop,cart
3. nx generate library mylib (chose React generator, no compiler and no test runner)
   Then I removed the Nx-welocome component from all the apps to keep the website content simple.

[todorpavlovic]

Same here. Any progress on this ?

[siphu1997]

Same issue.

[deefactorial]

This is the expected behavior.
https://youtu.be/JkcaGzhRjkc?t=959

[parostatkiem]

@deefactorial please read the issue description again. It has not much in common with the fragment of the video from your comment.

[jwadel]

This is the expected behavior.
https://youtu.be/JkcaGzhRjkc?t=959

But that doesn’t make it the right behaviour. The library abstraction erodes the great experience hot-reloading brings to developers.

[NTAK666]

same issue here

[jaysoo]

This is the same issue as #11615, where the workspace library is being served by a static remove rather than the host or the dev remote.

The workaround is outlined here: #11615 (comment)

If you know which libraries are problematic, you can exclude them from being shared.

// module-federation.config.js
module.exports = {
  shared: (libName, libConfigFromNx) => {
    return libName === '@react-module-federation/shared-components'
      ? false
      : libConfigFromNx
  },
  // ...
};

This will not work for libraries that require shared state (e.g. redux), which have to be singletons. You can also include the last alphabetical remote always in your --devRemotes.

---

We're still investigating if there is something we can do on our end, and webpack's ModuleFederationPlugin is determining where the libraries are loading from.
Closing this issue for now in favor of the other one, and will track progress there.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.