Conflict: Multiple assets emit to the same filename

Question

I\'m a webpack rookie who wants to learn all about it. I came across a conflict when running my webpack telling me:

ERROR in chunk html [entry] app.js Confl

Answer 1

I encountered this error in my local dev environment. For me, the solution to this error was to force the files to rebuild. To do this, I made a minor change to one of my CSS files.

I reloaded my browser and the error went away.

Answer 2

I changed index.html file from /public directory to /src to fix this issue. (Webpack 5.1.3)

Answer 3

I had exactly the same problem. The problem seems to occur with the file-loader. The error went away when I removed the html test and included html-webpack-plugin instead to generate an index.html file. This is my webpack.config.js file:

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
  },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

The html-webpack-plugin generates an index.html file and automatically injects the bundled js file into it.

Answer 4

The same error in a Vue.js project when doing e2e with Karma. The page was served using a static template index.html with /dist/build.js. And got this error running Karma.

The command to issue Karma using package.json was:

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

The output configuration in webpack.config.js was:

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

My solution: inspired by the Evan Burbidge's answer I appended the following at the end of webpack.config.js:

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

And then it eventually worked for both page serving and e2e.

Answer 5

i'm not quite familiar with your approach so I'll show you a common way to help you out.

First of all, on your output, you are specifying the filename to app.js which makes sense for me that the output will still be app.js. If you want to make it dynamic, then just use "filename": "[name].js".

The [name] part will make the filename dynamic for you. That's the purpose of your entry as an object. Each key will be used as a name in replacement of the [name].js.

And second, you can use the html-webpack-plugin. You don't need to include it as a test.

Answer 6

I had the same problem, and I found these in the documents.

If your configuration creates more than a single “chunk” (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.

• [name] is replaced by the name of the chunk.
• [hash] is replaced by the hash of the compilation.
• [chunkhash] is replaced by the hash of the chunk.

 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}