webpack-dev-middleware: [HMR] Update check failed: SyntaxError: Unexpected token <

publicPath can be just ‘/’ it worked for me.

  output: {
    path:       path.join(__dirname, 'public'),
    filename:   './js/webpack/[name].js',
    publicPath: '/',
  },

I have an issue like this and fixed with: publicPath: 'http://localhost:5000/static'

Webpack don’t find the right place to find manifest, or it arrives wrong… But worked!

I ran into this issue and wrestled with (and beat!) it today – this is the top Google result for the error message in the subject line, so I thought I might shed some additional light on this for those that happen to land here.

The error message is happening because of this code that webpack injects in your client bundle:

request.onreadystatechange = function() {
  if (request.readyState !== 4) return;
  if (request.status === 0) {
    // timeout
    reject(
      new Error("Manifest request to " + requestPath + " timed out.")
    );
  } else if (request.status === 404) {
    // no update available
    resolve();
  } else if (request.status !== 200 && request.status !== 304) {
    // other failure
    reject(new Error("Manifest request to " + requestPath + " failed."));
  } else {
    // success
    try {
      var update = JSON.parse(request.responseText);
    } catch (e) {
      reject(e);
      return;
    }
    resolve(update);
  }
}

The HMR module is trying to look for an update JSON manifest, and when there’s none available, your server should be returning a 404 or 500. What’s causing this error is that your server is returning a 200/304 and, perhaps, some default html (hence the ‘unexpected token <’) when it’s expecting JSON.

For me at least, this was caused by not handling 404 errors properly in my Express app – I was testing HMR before I was ready to 😃

So make sure you’re returning proper error codes for asset files in your publicPath and you should be good!

I’m encountering pretty much the same problem. Has anyone managed to find a solution?

I’m stuck on the same issue but nothing from above could fix it. Any solutions?

Closing, because the documentation also makes clear that output.publicPath should be set for HMR to work.

Finally I found the solution for this error

just change, app.get(‘*’, (req, res) => { res.sendFile(indexHtml); });

To

app.get(‘/’, (req, res) => { res.sendFile(indexHtml); });

It works to me

in you server.js

const path = require('path');
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
const config = require('../webpack.dev.config.js');


const app = express();
const compiler = webpack(config);
const devMiddleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath, // <------- this  line!
    stats: {colors: true}
})