If the console in Firefox is closed, the page doesn't display.

[lencys]

I'm preparing a POC where I want to test the functionality of Single SPA with various applications written in different frameworks. Everything should work, but in Firefox, if I have the console closed, the page doesn't load and all I see is a white background. Could you advise me on what the problem might be? Thank you.

https://github.com/lencys/poc-single-spa

[webJose]

Hello! I'll check it out soon.

[webJose]

Ok, I cloned the repository but there are projects missing (menu and wjelements), so at least the menu seems to be needed right away.

Furthermore, I see an error in your build import map: The dist folder doesn't have to be in the URL's. It should be:

{
  "imports": {
    "@wja/react": "http://localhost:4101/spa.js",
    "@wja/vanilla": "http://localhost:4102/spa.js",
    "@wja/menu": "http://localhost:4103/spa.ts",
    "@wja/vue": "http://localhost:4104/spa.ts",
    "@wja/wjelements": "http://localhost:4105/spa.js"
  }
}

Generally speaking, if something is a direct child of the dist folder, then when served is at the root level.

Let me know when you update the repository so I can try again.

[lencys]

I apologise. Everything should work now. But if you open it in firefox, it returns a white screen

[webJose]

Hello again. I just tested the repo in both Edge and Firefox and I can see all micro-frontends, but as you stated, Firefox only works if the console is open. I asked Copilot about this and none of the suggestions work. I guess this is why nobody uses Firefox.

The problem is only there while running the dev server (npm run dev). If you preview, it works. This is probably a bug in Vite's server, or the combination Vite + Firefox.

Long story short: Don't use Firefox for dev.

For the record, this is not related to vite-plugin-single-spa as far as I can tell.

[jkristan]

I think it is something related to the vite-plugin-single-spa. I have tried following the guide on the blog on Firefox and I got to the same point. When I open the project in Firefox, it sometimes shows a white screen. After checking inside the console, I'm getting numerous warnings that look like this: Loading failed for the module with source “http://localhost:xxxx/src/components/HelloWorld.vue”.. The funny thing is, is that it's not always like this. A few Ctrl + F5's and the warnings are different or the application loads normally.

When I remove the vitePluginSingleSpa({ type: 'root }) from my defineConfig in vite.config.ts the application loads normally all the time.

[webJose]

Interesting. vite-plugin-single-spa does very little while in serve mode. All code is pretty standard and only relates to serving or locating client code. The errors Firefox show seem to be related to the HTTP protocol, which is something handled by Vite. This is why I'm not convinced that my plug-in is the culprit, even if removing it makes Firefox behave.

If more people are affected by this, I would imagine an issue will eventually be logged. Regardless, I think this is a very low priority as you can always use other browsers for development, and then preview in Firefox every now and then. Inconvenient, yes, I agree, but not difficult or too time consuming.

[krishtoffer]

I want to confirm your comment. This issue seems to be purely on Vite, since it appears only in dev/serve. I also noticed that on my side, Firefox seems to load mife's slower than on chrome, not sure if it's at all related.

[webJose]

Yes! I also noted some serious delays loading mife's in Firefox when I tested for this. I guess one more reason not to use Firefox.