terser-webpack-plugin: Conflict: Multiple assets emit different content to the same filename

  • Operating System: Windows 10, Linux
  • Node Version: 12.16.1
  • NPM Version: 6.13.4
  • webpack Version: 4.43.0
  • terser-webpack-plugin Version: 3.0.4

Expected Behavior

The webpack build should work correctly.

Actual Behavior

When running version 3.0.3 (or earlier) of this package, everything works fine and the build is successful. Without changing anything else, if I upgrade to version 3.0.4 (or later), my build fails with these warnings:

WARNING in Conflict: Multiple assets emit different content to the same filename f54fad10657f74fb9883.worker.js
WARNING in Conflict: Multiple assets emit different content to the same filename f54fad10657f74fb9883.worker.js.map

Code

Relevant portions of our webpack config:

{
  test: /\.worker\.[j,t]s$/,
  use: ['worker-loader', 'babel-loader'],
},
minimizer: [
  new TerserPlugin({
    cache: false,
    extractComments: false,
    parallel: 4,
    sourceMap: true,
    terserOptions: {
      mangle: false,
      output: {
        comments: false,
      },
    },
  }),
],

How Do We Reproduce?

Upgrade to version 3.0.4 of this package in a project that also uses web workers.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 27 (12 by maintainers)

Commits related to this issue

Most upvoted comments

@7NZ You have two version of terser-webpack-plugin, setting node: production enable TerserPlugin, so you should remove it from your configuration, alternative usage https://webpack.js.org/configuration/optimization/#optimizationminimizer, you need setup plugin using the minimizer option. There are no difference in API between plugin and minimizer, but it is allow to avoid duplicate of plugin

No, keep eyes on this issue

@grantila Not sure if this will apply to your workspace, but I modified the output.filename to be more explicit, and it resolved the chunk name conflict:

Fail

    output: {
        path: path.resolve(__dirname, '../../dist/player-card/bundle'),
        filename: 'bundle.js'
    },

Success

    output: {
        path: path.resolve(__dirname, '../../dist/player-card/bundle'),
        filename: 'bundle.[name].js'
    },

This plugin should not exclude files from copy-webpack-plugin, because they should be minified too, sorry without reproducible test repo I can’t help, if you need to exclude something from copy-webpack-plugin you need to use the exclude option

webpack says you what you have two assets with the same name and different content

Not if I don’t use this plugin. Then webpack is happy.

So, if my config is:

    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                ...
            }) as any
        ]
    }

I get this error of multiple assets with the same name. But this config:

    optimization: {
        minimize: true
    }

works fine.

I use copy-webpack-plugin to copy statically named assets from another package. It’s these assets terser-webpack-plugin probably handles and produces a new content for (but with the same name). Maybe this plugin should detect files from copy-webpack-plugin and automatically exclude them?

This is still an issue with webpack 5. If I don’t use this plugin at all, everything works fine. I cannot remove the copy-webpack-plugin, as that will leave my bundle without the necessary external .js files. Also, the non-js assets copied don’t get this error either, indicating that there’s not a problem with the copy-webpack-plugin. If I do what the documentation says to configure this plugin, i.e. create it in the optimization.minimizer, I get his error.

There are no difference in API between plugin and minimizer, but it is allow to avoid duplicate of plugin

What does this mean @evilebottnawi? The options for optimization or optimization.minimizer are not at all the same as those for this plugin, so how do I configure this plugin without creating an instance of it?