Webpack-dev-server: After recent updates, hot reload not working

[justin808]

I get an issue like the image below, where hot reload does nothing with the message:

 GET http://0.0.0.0:3000/public/1ee4c5296740c98d3e61.hot-update.json 404 (Not Found)

I'm using the following dependencies. Any way that I can troubleshoot this?

 var config = require('./webpack.hot.config');
var server = new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  stats: { colors: true}
});

  "dependencies": {
    "big.js": "^2.5.1",
    "body-parser": "^1.9.3",
    "compute-roundn": "^1.0.3",
    "es6-loader": "^0.2.0",
    "escape-html": "^1.0.1",
    "expose-loader": "^0.6.0",
    "express": "^4.10.4",
    "flux": "^2.0.1",
    "highcharts-browserify": "0.1.1-4.0.3",
    "jquery": "^1.11.1",
    "jsx-loader": "^0.12.2",
    "loader-utils": "^0.2.5",
    "lodash": "^2.4.1",
    "marked": "^0.3.2",
    "moment": "^2.8.4",
    "numeral": "^1.5.3",
    "react": "^0.12.1",
    "react-bootstrap": "^0.13.0",
    "sleep": "1.1.8",
    "webpack": "^1.4.13"
  },
  "devDependencies": {
    "bower": "^1.3.12",
    "css-loader": "^0.9.0",
    "extract-text-webpack-plugin": "^0.3.5",
    "jest-cli": "^0.1.18",
    "react-hot-loader": "^0.5.0",
    "sass-loader": "^0.3.1",
    "style-loader": "^0.8.2",
    "webpack-dev-server": "^1.6.6"
  },

[jhnns]

Is HMR actually not working or is it just reporting 404s? Afaik 404s are no errors, but responses to signalize that there is no update...

[rhumlover]

Got the same, actually fixed it with this comment: https://github.com/webpack/webpack/issues/497#issuecomment-56948560

just got it working with this config:

entry: [
    'webpack/hot/dev-server',
    ...
],
output: {
    filename: 'www/index.js',
    publicPath: '/'
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

[jure]

I had the same issue and while @rhumlover's solution above works, if I understand it correctly, it also puts all of the assets in the root folder?

In any case, specifying a full URL in publicPath is what worked for me, before that the hot updates wanted to be loaded from nonexistent nested path (where my app resides, i.e. /admin/assets), instead of the root /assets folder.

var publicPath = "http://localhost:3001/assets/"

[SpaceK33z]

@justin808, do you still have this issue?

[justin808]

@SpaceK33z I doubt it, but I really don't know. Probably not.

[blackmiaool]

Hey guys~ This problem perplexed me for several hours, and finally I got a solution:

   output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
        publicPath: '/',
        hotUpdateChunkFilename: 'hot/hot-update.js',
        hotUpdateMainFilename: 'hot/hot-update.json'
    }

We can just remove the annoying hash by adding the last two params above to the webpack's config file.
@justin808

[jackrole]

@blackmiaool Would it caught a cache problem in browser if use a static output filename?
Webpack, Hot Module Replacement and the public path could be a slightly better solution.

[blackmiaool]

It's just a solution for those who always gets 404 error. You can turn off cache in settings panel of chrome's developer tools:Disable cache (while DevTools is open). @Jacksing

[timothyerwin]

I was getting this until I think I added a catch all route in express to send the index.html...I'm not sure why. maybe it calls next() instead of terminating at the response. This still seems wrong but it's working for now.

app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'web/index.html'));
});

[Ashoat]

I am curiously getting some perhaps related issue where the hashes generated by the server end (webpack-dev-server) and printed to the bash console don't match the hashes requested by the client and printed to the browser JS console. I was able to circumvent it by using @blackmiaool hack above.

[reduckted]

What worked for me was similar to the solution proposed by @rhumlover above. In my case, I already had a publicPath set, and it ended with a slash:

publicPath: 'dist/'

What I had to do was add a slash to the _start_ of it to stop getting 404s:

publicPath: '/dist/'

[iddan]

@blackmiaool you saved my life, thanks

[eugeniaguerrero]

@blackmiaool thank you so much!

[nickosepulveda]

var server = new WebpackDevServer(webpack(config), {
headers: { "Access-Control-Allow-Origin": "*" }, //Magic line, try it
publicPath: config.output.publicPath,
hot: true,
stats: { colors: true}
});

[samuelalvin]

We can just remove the annoying hash by adding the last two params above to the webpack's config file.

I've tried @blackmiaool 's solution and it works for me. Thank you!

[alexdriaguine]

I have the same problem as @blackmiaool and @Ashoat. When having a syntax error or something that makes webpack compile with errors, upon fixing the error the hashes from the server and the client mismatch.

Seems like the server responds with the next hash, but after fixing the error, another hash is generated while the client is still trying to access the old hash. Omitting the hash seems to fix this.

The problem seems to be that the client does not update the next hash when HMR compiles with errors..

[buchatsky]

In my case, the hash doesn't matter because

hotUpdateChunkFilename: '[id].hot-update.js',
hotUpdateMainFilename: 'hot-update.json'

doesn't work either. But it does work when I remove [id].