Does this support running in dev mode?

[JontyMC]

Hi, great package, appreciate the work. I'm trying to get a vue3 vite typescript app running as a micro-frontend. Does this package support using npm run dev for micro-frontends or do you have to use build & preview?

Is there an example somewhere of getting a vue3 vite typescript app to work?

[webJose]

This package supports using npm run dev. It doesn't, however, provide any efforts towards making HMR work well across multiple Vite servers coming together into a single browser window. It is up to Vite's HMR to figure this out, not this package. The good news is that, at least for Svelte, HMR seems to work pretty darn well. Maybe Vue users will have the same luck? Fingers crossed.

I don't have concrete examples uploaded anywhere, unfortunately. I do have some work done on a project called "API Market", that is meant as a database for API's devs can use in their apps. It uses single-spa to allow people to easily collaborate by creating MFE's that showcase the API's any way they want, and API's can have multiple showcasing MFE's. It's in my laptop only, unfortunately.

What I can offer is my blog series, where I used React, Svelte and Vue to investigate about single-spa and Vite. You'll find instructions on how to set Vite + Vue projects up, either via npm create vite or npm create vue. The latter is more interesting because it provides a starter project with dynamic imports and routing, which require some tweaking. I think my later posts describe this. I think.

Blog Series: Single-SPA & Svelte: My Journey

[JontyMC]

Thanks, have pushed repo here https://github.com/JontyMC/singleapptest

[JontyMC]

I tried changing "type": "module" and webpack.config.cjs in single-app, but still same error

[webJose]

Ah, webpack. The plug-in only works for Vite, not webpack. Webpack is something I cannot help you with.

[webJose]

I quickly reviewed your sample. Your Vite project will bundle in ESM format, but your root config is set to use webpack and bundle in the SystemJS module format. This mismatch clearly won't work. If you create your root config project using the tool from the single-spa team, you must then set your Vite project to also output in the SystemJS module format. HOWEVER, Vite cannot deliver in SystemJS format when run in serve mode npm run dev.

This is why all my documentation doesn't even tell you to use the single-spa team's tooling. It is far easier to just use this plug-in in all-ESM format. Read my blog carefully to learn how to do this.

If you want to create a root config project that is Vite-powered (and can therefore use it with npm run dev), you may follow the instructions found in this PR. Note that all the cleanup described there is optional. Just in case you want to follow the single-spa's team recomendation. I personally do not follow it and my root config projects are usually Svelte-powered.

Summary

You first need to learn about module formats. Then you must learn how Vite works. Finally, you must decide which way you want to go. To decide, you must learn the pros and cons of your decision.

[JontyMC]

Thanks so much for you help, I understand. I think I agree with you about the root-config, we will likely want a Vue root, so will give this a go. The javascript module/build eco-system has got to be one of the most complicated and least intuitive in all programming.