Infinite loop for specific case of Module Federation

[johnbenz13]

Bug report

Actual Behavior

The build enters an infinite loop, the child compilation calling itself in a recursive way.

Expected Behavior

The compilation should finish

How Do We Reproduce?

I've created a repository with a basic project that reproduces the bug.

It happens when we use both:

• explicit import for Module Federation shared library (see in webpack.config.js)
• experimentalUseImportModule to false for Mini Css Extract Plugin (see in webpack.config.js)

The problem is due to the child compiler copying the configuration of the parent compilation including ModuleFederation plugin with the explicit import on shared library. I've removed the Module Federation plugin from the child compilation but it seems there is still something to be removed

  const childCompiler =
  /** @type {Compilation} */
  this._compilation.createChildCompiler(`${MiniCssExtractPlugin.pluginName} ${request}`, outputOptions, []); // The templates are compiled and executed by NodeJS - similar to server side rendering
  // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
  // The following config enables relative URL support for the child compiler

  childCompiler.options.plugins = childCompiler.options.plugins.filter(plugin => {
    return plugin.constructor.name !== "ModuleFederationPlugin";
  }) || [];

Please paste the results of npx webpack-cli info here, and mention other relevant information

 System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 599.45 MB / 16.00 GB
  Binaries:
    Node: 16.14.2 - /var/folders/90/lf2bgcx94xx_pkjrw9c8p9pr0000gp/T/fnm_multishells/97615_1649075013105/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.0 - /var/folders/90/lf2bgcx94xx_pkjrw9c8p9pr0000gp/T/fnm_multishells/97615_1649075013105/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Firefox: 97.0.1
    Safari: 15.1
  Monorepos:
    Yarn Workspaces: 1.22.17

[vankop]

technically this will not work anyway.. css should be extracted..

[alexander-akait]

experimentalUseImportModule to false for Mini Css Extract Plugin (see in webpack.config.js)

Can you explain why you set to false?

[johnbenz13]

This is just a repository I've created to reproduce the bug and discuss a solution, the bug we're facing happens in a far more bigger project than the one provided and is far more complex. I've only reduced it to something simpler and lighter so we can debug easily.

@alexander-akait I've just set to false to reproduce the same behavior we're facing in our real project, meaning it uses the child compilation and does not enter the if

@vankop I'm not sure I understand what you mean by css should be extracted?

I understand that this is a really specific edge case that may not concern a lot of people but as far as I understand the options we're using experimentalUseImportModule and explicit import in MF shared properties are legitimate options of both webpack in this plugin and it should then work properly.

I think I have a good understanding of why it's happening and I'm willing to contribute with a PR like the code I've proposed above but for some reason something is still missing. If you know why after removing the ModuleFederationPlugin from the child compilation it still tries to import the js file it would help a lot :-)