Bug: Multiple stats outputs with mini-css-extract-plugin

[koconnorIXL]

I encountered some unexpected errors today when I attempted to upgrade my webpack project to webpack v5. While I am not sure that the "fault" for these errors lies with webpack-stats-plugin, it seems to me like this plugin was certainly involved. So I wanted to post here in case anyone is interested, or can provide me with advice. Without further ado, here goes.

For starters, the error that I was getting:
"Conflict: Multiple assets emit different content to the same filename stats.json"

My configuration for webpack-stats-plugin was as follows:

plugins: [

  new StatsWriterPlugin({
 
    filename: 'stats.json',

    fields: ['entrypoints']

  })

]

Digging a little deeper, I found a few things:

1. webpack-stats-plugin taps into the compilation hook of the compiler that it receives. This allows it to be notified each time a "compilation" is created, and it will tap into the processAssets hook of each compilation - emitting a stats json file each time the hook is notified

2. In my project, the mini-css-extract-plugin seemed to be causing a new child compilation object to be created for every css file that it processed. For the record, my set up for mini-css-extract-plugin was something like this:

[
    {
      test: /\.css$/,
      include,
      exclude,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    }
  ]

As a result of these two things, this plugin was attempting to write N+1 stats.json files, where N is the number of CSS files which were processed in my project. (For the record, the first N stats.json files do not cause errors because this plugin judges all of the emitted stats all to be the same. However, the last attempt to emit a stats.json for the parent compiler's compilation causes an error.)

Now, I do have a few workarounds for this issue. Namely, I have temporarily changed my plugin configuration to be something like:

plugins: [

  new StatsWriterPlugin({
 
    filename: (curCompiler) => {
      if (curCompiler.name && curCompiler.name.startsWith('mini-css-extract-plugin')) {
        return 'dummy.json';
      }
      return 'stats.json';
    },

    fields: ['entrypoints']

  })

]

Another workaround I have is just using the json flag which comes with the webpack cli:

webpack --json stats.json

However, I do generally enjoy the API which this plugin provides, and I thought it might be nice if this plugin allowed me to pass in a configuration parameter indicating that I only cared about stats on the root compiler/compilation instances. Given that mini-css-extract-plugin is endorsed pretty freely on the webpack site, I feel like it is possible others might run into this as well? Or maybe I am using these two plugins in a non-standard way? I don't know

Please let me know what you think, and please also feel free to close if you've got bigger fish to fry

Current library versions:

"mini-css-extract-plugin": "1.0.0",
"webpack": "5.1.3",
"webpack-cli": "4.0.0",
"webpack-stats-plugin": "1.0.0"

[ryan-roemer]

@koconnorIXL -- This may be related to:

• Bug: Multiple output from repeated processAssets hook call. #57
• improve compatibility with webpack@5 #52 (comment)

Would you have a chance to create a minimal repository to reproduce this issue like you did for the other issue or enhance that repo to exhibit the issues you see in both this issue and #56 ? Thanks!

[ryan-roemer]

Fixes released in webpack-stats-plugin@1.0.1

@koconnorIXL -- Can you confirm the fix?

[koconnorIXL]

@ryan-roemer - Yes indeed, I am no longer experience this bug after upgrading to v1.0.1. Thanks for helping me out so quickly!

[ryan-roemer]

Great! Thanks for both your issues, detailed analyses, and the repository to help me validate fixes faster @koconnorIXL !