Using module federation in a Vite/React app, host application doesn't reflect changes made in remote

Question

I'm experimenting with module federation for a project and I was successfully able to serve a remote application serving up a simple button, then have a host application consume that button for usage. However, when I then make changes to the button in the remote application the changes are not reflected in the host.

If I shut down the remote application then the host will start throwing errors (which is intended at this point). I'm lazy loading the import using Suspense. The vite.config.ts files are clean from what I can tell, and I've ruled out browser caching as a culprit. Could it be something with the IDE (Visual Studio 2022 Pro) or Vite?

Answer 1

Currently, Vite's HMR feature for React depends on something called the React Preamble. This preamble is a JavaScript that runs and installs something in the window object. Among other things, the preamble has the development server's host address to establish a websocket connection to know when to refresh the page (basically the core of HMR).

If you followed the explanation so far, this is why you cannot have HMR in the other React project:

1. The preamble was installed by the first (root) project, so the address is that of the first project.
2. The window object's property has already been set by the root project's preamble, so installing another preamble would overwrite this.
3. The second project doesn't even attempt to establish/run a preamble because this only happens when you bundle an HTML page. Because your second project merely exports JavaScript, there is no HTML page. No HTML page means no preamble. No peamble means no HMR.