ExposeRuntimeCssAssetsPlugin error even after adding the plugin

[Jagadeeshraj]

Hi,

I'm trying to integrate the single-spa-css and getting below exception even after adding MiniCssExtractPlugin and ExposeRuntimeCssAssetsPlugin. Let me know if I'm missing something.

error Error: single-spa-css: to use webpackExtractedCss, add ExposeRuntimeCssAssetsPlugin to your webpack config.

Wepack:

module.exports = (config, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
  singleSpaWebpackConfig.externals.push("shareddata");
  const plugins = [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new ExposeRuntimeCssAssetsPlugin({
      // The filename here must match the filename for the MiniCssExtractPlugin
      filename: "[name].css",
    }),
  ];
  singleSpaWebpackConfig.plugins = [
    ...singleSpaWebpackConfig.plugins,
    ...plugins,
  ];
  return singleSpaWebpackConfig;
};

Angular: 12.2.14
Webpack: 5.50.0
single-spa: ^5.9.2
single-spa-angular: ^5.0.2
single-spa-css: ^2.0.0

TIA

[telmaantunes]

I'm having the same problem now on Vue 2. Does anybody know how to this?

[JamiesWhiteShirt]

I am experiencing the same issue with a setup using module federation.

Upon investigation it seems the error is misleading and not caused by a missing plugin in this case, but an undocumented known limitation with single-spa-css, which is that ExposeRuntimeCssAssetsPlugin doesn't work with code splitting. Code splitting can for instance happen when using the splitChunks Webpack optimization, dynamic imports or module federation.

What triggers it is that the single-spa-css module is bundled in a chunk which is not an initial chunk and/or is a chunk with no CSS. With code splitting, the single-spa-css module might commonly be placed in a non-initial "vendor" chunk separate from the application code and CSS. Because the Webpack runtime is not shared across chunks, the runtime module which defines __webpack_require.cssAssets and __webpack_require__.cssAssetFileName must be added to the same chunk as the consumer in order for the properties to be available. When visiting chunks, the plugin does not necessarily add the runtime module to the right chunk. Thus, at runtime single-spa-css assumes that the plugin is not installed.

I believe this is a complex problem to solve. Even if the plugin added the runtime module to the right chunk in cases of code splitting, it would have to account for multiple CSS assets, and potentially lazy loading of these assets. With multiple entrypoints and/or lazy loading of non-initial chunks, determining the set of CSS assets becomes rather difficult.