Import module error in spa.tsx when running react microfrontend

[Jordan-Eckowitz]

Describe the bug

I created a root config and application using the single-spa CLI tool and all works fine. I followed the guidelines in their docs (https://single-spa.js.org/docs/ecosystem-vite#micro-frontend-projects), as well as your readme, for adding an application for vite react ts.

I'm getting the error below inside the spa.tsx file (it's the exact code in your readme). When I try and access the standalone vite app directly it works fine. So, I think I can say for sure, that the issue is on the single-spa side. Any idea what could be causing the problem?

Project type: [ ] Root Config [x] Micro-frontend/parcel
Project Framework: [x] React [ ] Svelte [ ] Vue [ ] Preact [ ] Other:

[webJose]

You're most likely using SystemJS modules in the root config project. Did you make the change to ES modules?

[Jordan-Eckowitz]

I see in the docs they mention that using their root config approach is recommended. Is there a way to mix their approach with SystemJS for root configs and your approach for Vite apps? Or do I have to use your Vite root config approach to get this working?

[webJose]

I have never tested my plug-in with SystemJS modules. Feel free to do so. Once a guy told me that works just fine. This is set in Vite options, completely outside my plug-in. It is a rollup option (the output format). Look the setting up, and set it to 'system'. Note, however, that Vite is incapable of serving SystemJS modules while in serve mode (npm run dev). If you do SystemJS, you can only work locally with built projects. Forget HMR.

Now, having said that, maybe you should follow the instructions of creating a root config project using my plug-in. Then you'll be working with ES modules, HMR will probably work for you, and overall things will be simpler.

[Jordan-Eckowitz]

Thanks so much for the feedback, this is really helpful!

Just one last question, I don't see any mention of managing layouts with your root config approach (although I may have missed it). In my case I'd use a react implementation of Vite for my root config. Would I then use something like react router for handling layout instead of the single-spa layout engine?

[webJose]

I don't find single-spa's layout engine helpful. I never use it. I always do registerApplication() + start() instead. I cannot comment on what's better or on any best practices around it. I also dislike React very much and only do Svelte, so I cannot comment on react-router either. This topic is up to you!

I am converting this to a discussion. I encourage you to come back to this discussion and post your findings around this React-specific topics, so others can benefit from your experience.