38

I'm getting this error when trying to run webpack build with hashing in my config:

ERROR in chunk main [entry]
[name].[chunkhash].js
Cannot use [chunkhash] or [contenthash] for chunk in '[name].[chunkhash].js' 
(use [hash] instead)

Webpack dev server runs fine

What is the reason for this?

1
  • Odd, I'm getting the reverse. Dev server errors, build works fine. Also solved for me by removing --hot, but that's not really a solution :)
    – RobW
    May 27, 2018 at 5:11

6 Answers 6

36

Commented out new webpack.HotModuleReplacementPlugin() in the plugins helped fix this

2
  • 13
    How is that a solution if you need the HotModuleReplacementPlugin? May 19, 2019 at 12:23
  • 2
    You can have different configurations depending on environment. You probably don't need hash in filename at the same time that you need HotModuleReplacementPlugin.
    – Sharkovich
    May 21, 2019 at 6:05
22

My solution was to change the filename depending on whether the mode is production or development:

filename: mode === 'production' ? '[name].[chunkhash].js' : '[name].[hash].js',

Fixed my problem and still able to use chunkhash for my production filenames as well as HotModuleReplacementPlugin.

2
  • Where do you change this?
    – coler-j
    Mar 14, 2019 at 16:58
  • It was in the output section of my webpack.config.js file.
    – Dan Buda
    Mar 15, 2019 at 19:17
7

This worked for me too...thanks to @pizzaae. One thing to note, is that you never want to enable HMR during production. Having different Webpack configs for Prod and Dev can help if you want to use both HotModuleReplacementPlugin and chunkash.

1
  • 1
    +1. Very useful because I forgot to remove --hmr when trying a production mode build on local development server (ng serve --prod --hmr). Jul 28, 2019 at 7:54
6

I did something more like this, so you don't have comment out functionality

output: {
    filename: process.env.production ? `bundle-[chunkHash].js` : `bundle-[hash].js`
}

ChunkHash should only be used in production.

0
3

In my case I wanted to enable the Hot Module replacement for a dev server, so I changed it to this:

output: {
    filename: '[name].[hash].js',
},
1

if config webpack.HotModuleReplacementPlugin() on mode: 'development'. removed or commented out webpack.HotModuleReplacementPlugin() form plugins.

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map', // source-map
  devServer: {
      contentBase: './dist',
      //hot: true
  },
  plugins: [
      new ManifestPlugin({fileName: '006.manifest.json'}),
      new webpack.NamedModulesPlugin()
      //new webpack.HotModuleReplacementPlugin()
  ]
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.