How to make the HMR work? Or will it work?

[samuellawerentz]

Hi @webJose , thank you for this plugin and all your wonderful blog posts explaining and teaching microfrontends. I went through most of your articles and other posts. I was not able to find a solid advice on HMR.

I have 3 MFEs

1. Root Config - Vite + React
2. MFE 1 - called "service" -> Vite + React
3. MFE 3 - called "engage" -> Vite + React

Thanks to your plugin, I'm able to make things work. Everything works, except HMR. I change something in RootConfig - HMR works, but when I update the MFEs, changes do not reflect, until I reload the page.

Is there a way to fix this? Or am I missing something, Is there a hack?

Thanks in advance!

[webJose]

Hello, @samuellawerentz. Indeed, HMR is a "hot" issue (pardon the pun) but I can tell you right now it is out of my hands. As I told tudosev in #74, it is a Vite feature that is simply incompatible with multi-project scenarios such as single-spa in development mode.

I'll provide the details of what I know and did here.

Initial Impressions

When I first stumbled upon the error, I was in the middle of writing one of the articles you read. I searched the web but could not find a thing, so I referred myself to the project's source code. There I learned that the "preamble" is a piece of JavaScript that is injected to the webpage in the form of a global object (a property of the global window object) that is necessary for React HMR to work.

Since the code is hardcoded into this Vite React plug-in, I worked around the issue as presented in the article by disabling HMR on the MFE (It was a Vue root project with a React MFE).

Issue Reported

I did not give up that easily and went ahead and opened issue #210 within this Vite project. We had some discussions and I was advised to use this plug-in even in non-React projects. Long story short: I don't think this is viable.

Further Understanding

This is what I later learned that led me to give up on trying to make it work. The preamble is a piece of JavaScript injected to the project's web page during the TransformIndexHtml hook. The problem: Only the root project in single-spa has an index page. So if root project is in React, then you can have a preamble injected, but if your root is something else, then no preamble is injected. At this point, I think, I was told to add the React plug-in to my Vue root project to get the preamble installed.

The recommendation doesn't work either because the preamble is tied to the server that installs it. In other words, the preamble comes with code that identifies the Vite DEV server it came from. This means that it assumes code changes (that will trigger HMR) will come from the Vite project that started the server, and that is the root project, not any of the React MFE's that you might have working and tied to said root project. This is why HMR for the root works, but not for MFE's, and if it does something, reloads the entire page, not just the part that changed.

Conclusion

Vite's HMR implementation for React is simply incompatible with the idea of connecting multiple projects together in a single page. It would require willingness from the Vite core team to work on a completely new design of HMR for React to make it work for single-spa or for someone else to come up with a React plug-in for Vite that works for single-spa.

---

As a final note, Svelte HMR seems to work just fine, which is what I want long term as I have completely rejected React and all its bloated library ecosystem that mostly exist to alleviate the design shortcomings of React itself.

So, what to do? I suggest to raise an issue for vite-plugin-react to see if Vite's core team would like to take on the mission of creating a brand new, completely redesigned way of providing HMR for React that works with multiple projects scenarios like single-spa.

[samuellawerentz]

Thanks much for the wonderful explanation @webJose and for sharing your knowledge. I'll update my team on this and decide the next steps. I'll update you if I find any hack to make this work..!