Loading micro frontend root App component's CSS in singleSpaReact on mounting to the host application

Question

colleagues!

Need a piece of advice! Micro frontend in singleSpaReact does not load root's component CSS at the mounting, but only page CSS according routing navigation.

Implemented a micro frontend using singleSpaReact. In webpack.config for devmode build use:

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
    ignoreOrder: false,

  }),
  new ExposeRuntimeCssAssetsPlugin({
    filename: '[name].[contenthash].css',
  }),
],

We use CSS-modules. Have been running into an issue on mounting our micro front end to the host application: it does not load root App component's CSS. Only loads CSS for a page it navigates to via routing. Our entry point looks like:

 const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return GlobalErrorBoundary
  },
})

export const { bootstrap, mount, unmount } = lifecycles

So, the root React component is App. It renders a tree of components with some CSS modules in each one, but the CSS is not loaded. I checked how the CSS is applied in our host app: it adds "link" tag for pages's CSS into the head on navigation via routing. What's wrong in our build, what extra steps might be added to address the issue, I.e. to make "App" root component's CSS loaded? Highly appreciate any clue!

Answer 1

Already solved by means of adding singleSpaCss module.

    
        const reactLifecycles = singleSpaReact({
          React,
          ReactDOM,
          rootComponent: App,
          errorBoundary(err, info, props) {
            return GlobalErrorBoundary
          },
        })
        
        const cssLifecycles =
          !getIsDevelopment() &&
          singleSpaCss({
            // cssUrls: [],
            webpackExtractedCss: true,
            shouldUnmount: true,
            timeout: 5000,
          })
        
        let bootstrap
        let mount
        let unmount
        
        if (getIsDevelopment()) {
          bootstrap = reactLifecycles.bootstrap
          mount = reactLifecycles.mount
          unmount = reactLifecycles.unmount
        } else {
          bootstrap = [cssLifecycles.bootstrap, reactLifecycles.bootstrap]
        
          mount = [
            // The css lifecycles should be before your framework's mount lifecycle,
            // to avoid a Flicker of Unstyled Content (FOUC)
            cssLifecycles.mount,
            reactLifecycles.mount,
          ]
        
          unmount = [
            // The css lifecycles should be after your framework's unmount lifecycle,
            // to avoid a Flicker of Unstyled Content (FOUC)
            reactLifecycles.unmount,
            cssLifecycles.unmount,
          ]
        }
        
        export { bootstrap, mount, unmount }