Single-spa is inserting microfrontend into both divs on a two microfrontend page

25 Views Asked by At

I have a React application using Typescript, trying to load two microfrontends onto a single page at the same time.

I have verified both remoteEntry.js files are accessible and have loaded from the appropriate places and are different. When displaying one at a time they load in fine. When they are put on a combined page the same microfrontend gets displayed in both divs. The div ID's are unique on the target div's, and when I remove them single-spa will create two divs and still display the same MFE in both.

When inspecting the DOM I see the same module__container--id set for both sub div classes like it is literally putting the same microfrontend into both target divs.

Getting the loaded applications and statuses shows both with unique names and the status of mounted.

I was expecting these to load in correctly. On rare occasions the app will load in the second MFE into both divs instead of the first MFE.

0

There are 0 best solutions below