I am using single spa to create a my react microfrontends, in one of the MFE(microfrontend) I need to dynamically import a ".js" from another MFE and render the component , for that I am using systemjs import
Below is a sample code on how the child component exposes a function to export a js file in the main files
export function getcode() {
return import("./views/rk.js");
}
and in the parent component I use react.lazy to import the js file from the function and render as component
const Test = React.lazy(() =>
import("@Test/react-singlespa").then((mod) => mod.getcode())
);
and render the above const as below using
<React.Suspense fallback="Loading ...">
<Test/>
</React.Suspense>
I don't have issue while running the code in development mode but in the production mode the styles are messed up for first load but subsequently the styles are fine.
The question seems to be common with material ui issues import of webpack, but none of the solutions online seem to help. I tried every possible solution given in the below links
https://github.com/mui-org/material-ui/issues/15610
https://material-ui.com/getting-started/faq/#i-have-several-instances-of-styles-on-the-page
Assuming this is something that has to be done with Single-spa framework ...any help in this regard is greatly appreciated