Webpack build never completes when using experimentalUseImportModule

[wemyss]

Bug report

Actual Behavior

In the sample project, it hangs indefinitely at 28%.

Expected Behavior

The project should build successfully. In the sample project, it should build successfully with parallelism: 1 and experimentalUseImportModule: true, but it does not.

How Do We Reproduce?

Please see the sample typescript project using css modules - https://github.com/wemyss/webpack-css-mini-extract-plugin-bug. This was the smallest working set of files I could reproduce the issue with (the dependency structure from the entry point is shown below). Note that I had to reduce paralellism from the default of 100 to 1 to demonstrate the issue with such a small project. Instructions to reproduce are in the readme in that repository.

index.ts  -> igloo.ts -> igloo.css -> forest.css -> color.css
         \--------> happy.css --------^

If you set experimentalUseImportModule to false, webpack will successfully generate the build.

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

System: OS: macOS 11.6.1 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Memory: 1.28 GB / 32.00 GB Binaries: Node: 12.22.5 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 6.14.14 - /usr/local/bin/npm Browsers: Chrome: 96.0.4664.110 Firefox: 95.0.1 Safari: 15.1 Safari Technology Preview: 15.4 Packages: css-loader: ^5.2.4 => 5.2.7 ts-loader: ^9.2.3 => 9.2.6 webpack: ^5.54.0 => 5.65.0 webpack-cli: ^4.8.0 => 4.9.1 webpack-dev-server: ^4.6.0 => 4.6.0

[alexander-akait]

Yep, looks like bug, anyway you don't need experimentalUseImportModule, because it is enabled by default if webpack is supported it, regarding parallelism, we should fix it

[wemyss]

we should fix it

Any insights on where the bug may be? Keen to help fix it if I could be of use.

I got as far as figuring out what modules were stuck and where but couldn't reason if it was a missed dependency causing decreaseParallelism to be invoked prematurely, or if resolution order was incorrect and modules should have been added to queues in a different order (which would have resulted in color.css being processed and the build completing). Or something completely different that I've overlooked 😅.

Debugging output

// method invoked, module.debugId, module.identifier()
_addModule, 1000, /node_modules/ts-loader/index.js!/src/index.ts
_buildModule, 1000, /node_modules/ts-loader/index.js!/src/index.ts
_processModuleDependencies, 1000, /node_modules/ts-loader/index.js!/src/index.ts
_addModule, 1001, /node_modules/mini-css-extract-plugin/dist/loader.js!/node_modules/css-loader/dist/cjs.js!/src/happy/happy.module.css
_addModule, 1002, /node_modules/ts-loader/index.js!/src/igloo/igloo.ts
_buildModule, 1001, /node_modules/mini-css-extract-plugin/dist/loader.js!/node_modules/css-loader/dist/cjs.js!/src/happy/happy.module.css
_buildModule, 1002, /node_modules/ts-loader/index.js!/src/igloo/igloo.ts
_processModuleDependencies, 1002, /node_modules/ts-loader/index.js!/src/igloo/igloo.ts
_addModule, 1003, /node_modules/css-loader/dist/cjs.js!/src/happy/happy.module.css
_addModule, 1004, /node_modules/mini-css-extract-plugin/dist/loader.js!/node_modules/css-loader/dist/cjs.js!/src/igloo/igloo.module.css
_buildModule, 1003, /node_modules/css-loader/dist/cjs.js!/src/happy/happy.module.css
_processModuleDependencies, 1003, /node_modules/css-loader/dist/cjs.js!/src/happy/happy.module.css
_addModule, 1005, /node_modules/css-loader/dist/runtime/api.js
_addModule, 1006, /node_modules/css-loader/dist/cjs.js!/src/forest/forest.module.css
_buildModule, 1004, /node_modules/mini-css-extract-plugin/dist/loader.js!/node_modules/css-loader/dist/cjs.js!/src/igloo/igloo.module.css
_buildModule, 1005, /node_modules/css-loader/dist/runtime/api.js
_processModuleDependencies, 1005, /node_modules/css-loader/dist/runtime/api.js
_addModule, 1007, /node_modules/css-loader/dist/cjs.js!/src/igloo/igloo.module.css
_buildModule, 1006, /node_modules/css-loader/dist/cjs.js!/src/forest/forest.module.css
_processModuleDependencies, 1006, /node_modules/css-loader/dist/cjs.js!/src/forest/forest.module.css
_addModule, 1009, /node_modules/css-loader/dist/cjs.js!/src/color/color.module.css
_buildModule, 1007, /node_modules/css-loader/dist/cjs.js!/src/igloo/igloo.module.css
_processModuleDependencies, 1007, /node_modules/css-loader/dist/cjs.js!/src/igloo/igloo.module.css

// Once stalled, this is final the state of the queues in Compilation.js
{
  processDependenciesQueue_entries_itemsInProcessingState_debugIds: [ 1000, 1002, 1003, 1006 ],
  buildQueue_entries_itemsInProcessingState_debugIds: [ 1001, 1004 ],
  buildQueue_queued_list_debugIds: [ 1009 ]
}

[alexander-akait]

Any insights on where the bug may be? Keen to help fix it if I could be of use.

I think bug on webpack side, using 1 values we say build only one module at the same time, but when we import executed mdules we have two modules, original and executed, and there is deadlock, first modules already in progress, but executed modules should be finished to finish first (and we have deadlock), if you need I can provide lines on code

[alexander-akait]

You can see this here buildQueue_entries_itemsInProcessingState_debugIds (two modules in progress)

[martenvdlp]

Just ran into this issue aswell, build won't work (hangs) without explicitly setting parallelism: 2 in the Webpack config using Webpack 5.73.0 and mini-css-extract-plugin 2.6.0 in HMR mode. Setting the experimentalUseImportModule: false did not seem to have any effect in my case? Did you guys manage to fix this..?

[alexander-akait]

You should not have freeze here if you don't have 1