I’m writing this quick one up so you can save the 1.5 hours that I spent debugging this.

Terms :
HMR – HotModelReload – webpack-dev-server option to trigger browser-auto-refresh when webpack detects filechange (and re-compiles)

Here’s what I’m using :

• Rails 5.2
• Webpack-Manifest Gem
• Yarn
  • Webpack (-cli)
  • Webpack-dev-server
  • @babel/core
  • @babel/preset-react

The issue : When running webpack-dev-server with --hot option (enable HotModelReloading, webpack compile fails with :

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

Context : With Rails + Webpack-Manifest gem, webpack config is being used from ./config/webpack/environment.js (and it’s named siblings).

This SO discussed the problem and solution
https://stackoverflow.com/questions/50217480/cannot-use-chunkhash-or-contenthash-for-chunk-in-name-chunkhash-js-us
It does not unfortunately tell you very well what to do with

// 4th SO andswer of SO:50217480
output: {
    filename: process.env.production ? `bundle-[chunkHash].js` : `bundle-[hash].js`
}

Luckly, this SO includes a complete webpack.config.js (still not quite where we’re at with webpack-manifest… close.
We’ll notice that output.filename is part of the main config.
I validated this by adding console.log("webpack env", environment) to ./config/webpack/development.js and verifying that, apart from output of virtual-object names, :outputis indeed on the base config object.

SO (THE ANSWER) : edit ./config/webpack/development.js and add : config.output.filename = "js/[name]-[hash].js".

// ./config/webpack/developer.js - at least for my app

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

const config = environment.toWebpackConfig();
config.devServer = {
  contentBase: '.',
  host: "localhost",
  port: 3035,
  publicPath: 'http://localhost:3035/',
  historyApiFallback: true,
  proxy: {
    '/packs': { // string to look for proxying requests to api
      target: 'http://localhost:3035', // Path of your rails api server
    },
  },
}
config.output.filename = "js/[name]-[hash].js"

module.exports = config;

Enjoy!