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

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"
  },

developer_tools_-_http___0_0_0_0_3000_public_dashboard-fund-facts_html

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Reactions: 13
  • Comments: 17 (2 by maintainers)

Most upvoted comments

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

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/"

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()
]

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

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/'

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'));
});