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, :output
is 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!