Bug report

What is the current behavior? It appears that when using ProgressPlugin, MiniCssExtractPlugin and File System cache, the first cache pack gets invalidated with the following reason Pack got invalid because of write to: ProgressPlugin|counts

If the current behavior is a bug, please provide the steps to reproduce.

const { resolve } = require("path");
const { ProgressPlugin } = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: {
    styles: ["./style.css"],
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  plugins: [new MiniCssExtractPlugin(), new ProgressPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  infrastructureLogging: {
    level: "verbose",
  },
  cache: {
    profile: true,
    type: "filesystem",
    maxMemoryGenerations: 1,
  },
};

➜  webpack-test yarn webpack              
$ /Users/cli-reproductions/webpack-test/node_modules/.bin/webpack
    [webpack-cli] Compiler starting... 
    [webpack-cli] Compiler is using config: '/Users/cli-reproductions/webpack-test/webpack.config.js'
<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 35.202082 ms
    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
    [webpack-cli] Compiler finished
    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|dependencyType=|esm|path=|/Users/cli-reproductions/webpack-test|request=|./style.css
    [webpack.cache.PackFileCacheStrategy] Storing pack...
<t> [webpack.cache.PackFileCacheStrategy] resolve build dependencies: 762.821528 ms
<t> [webpack.cache.PackFileCacheStrategy] snapshot build dependencies: 21.222197 ms
    [webpack.cache.PackFileCacheStrategy] 27 fresh items in cache put into pack 0
<t> [webpack.cache.PackFileCacheStrategy] store pack: 27.86769 ms
    [webpack.cache.PackFileCacheStrategy] Stored pack (27 items, 1 files, 0 MiB)
asset styles.js 2.03 KiB [compared for emit] (name: styles)
asset styles.css 222 bytes [compared for emit] (name: styles)
Entrypoint styles 2.25 KiB = styles.css 222 bytes styles.js 2.03 KiB
orphan modules 2.76 KiB (javascript) 937 bytes (runtime) [orphan] 7 modules
runtime modules 274 bytes 1 module
cacheable modules 50 bytes (javascript) 21 bytes (css/mini-extract)
  ./style.css 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./style.css 21 bytes [built] [code generated]
webpack 5.64.4 compiled successfully in 281 ms
✨  Done in 1.69s.


➜  webpack-test yarn webpack 
$ /Users/cli-reproductions/webpack-test/node_modules/.bin/webpack
    [webpack-cli] Compiler starting... 
    [webpack-cli] Compiler is using config: '/Users/cli-reproductions/webpack-test/webpack.config.js'
<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 59.647659 ms
<t> [webpack.cache.PackFileCacheStrategy] check build dependencies: 43.416812 ms
<t> [webpack.cache.PackFileCacheStrategy] restore cache content metadata: 2.01511 ms
    [webpack.cache.PackFileCacheStrategy] starting to restore cache content 0 (32.8 KiB) because of request to: ProgressPlugin|counts
<t> [webpack.cache.PackFileCacheStrategy] restore cache content 0 (32.8 KiB): 10.16656 ms
    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
    [webpack-cli] Compiler finished
    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ProgressPlugin|counts
    [webpack.cache.PackFileCacheStrategy] Storing pack...
    [webpack.cache.PackFileCacheStrategy] 1 fresh items in cache put into pack 1
<t> [webpack.cache.PackFileCacheStrategy] store pack: 48.41304 ms
    [webpack.cache.PackFileCacheStrategy] Stored pack (27 items, 2 files, 0 MiB)
asset styles.js 2.03 KiB [compared for emit] (name: styles)
asset styles.css 222 bytes [compared for emit] (name: styles)
Entrypoint styles 2.25 KiB = styles.css 222 bytes styles.js 2.03 KiB
cached modules 50 bytes (javascript) 21 bytes (css/mini-extract) 274 bytes (runtime) [cached] 3 modules
webpack 5.64.4 compiled successfully in 278 ms
✨  Done in 0.94s.

What is the expected behavior? I expect that since the are no file changes the pack is not invalidated.

Other relevant information: webpack version: 5.65.0 Node.js version: 14.18.1 Operating System: darwin x64 Additional tools:

Yep, bug, thanks for issue

Pack got invalid because of write to: ProgressPlugin|counts

The progress plugin caches the module count when it changes. Somehow it seem to unexpectedly change...

I believe this is a bug in LoaderPlugin not calling processModuleDependencies when using loaderContext.importModule (used in MiniCssExtractPlugin).

We can narrow it down to this location by noting this bug isnt present when experimentalUseImportModule = false.

Since css-loader is injecting other imports (css-loader\\dist\\runtime\\api.js, etc), they need to be accounted for in the packs, else on future runs (when styles.css is unchanged -> cached -> doesnt run through pitch of MiniCssExtractPlugin.loader), these dependencies show up as not previously known (in this case, via ProgressPlugin not seeing any build for these modules).

Yep, I think you are right

i cant build any new project on this webpacks version, cause says: TypeError: MiniCssExtractPlugin is not a constructor, what can i do?

Is there a workaround for this?

using experimentalUseImportModule=false in mini-css should help.

this should be solved another way around.. this.importModule should not "count" as module, e.g. scenario

module A => module B ( loader importModule module C)

here on second build we have only A and B modules.. (modules are in cache already builded)

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

bump

This is still very much an issue.

see https://github.com/angular/angular-cli/issues/24179

I think this causes Angular 14 to be completely unusable