webpack-hot-middleware: Got error ---"EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection."

I also have this issue. My server setup looks like this:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.local.config');

var port = process.env.PORT || config.devPort;
var address = config.devAddress;

var app = express();
var compiler = webpack(config);

// Logging
app.use(require('morgan')('short'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'app/local.html'));
});

app.use(require('webpack-hot-middleware')(compiler));

app.listen(port, address, function (error) {
  if (error) throw error;

  console.log('server running at http://%s:%d', address, port);
});

EDIT:

I changed my config to this and it worked.

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.local.config');

var port = process.env.PORT || config.devPort;
var address = config.devAddress;

var app = express();
var compiler = webpack(config);

// Logging
app.use(require('morgan')('short'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler, {
  log: console.log,
  path: '/__webpack_hmr',
  heartbeat: 10 * 1000
}));

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'app/local.html'));
});

app.listen(port, address, function (error) {
  if (error) throw error;

  console.log('server running at http://%s:%d', address, port);
});

I had this error while serving a static index.html (using Express static middleware), and including my js bundle as a script there. As my first webpack entry, I had

'webpack-hot-middleware/client?path=http://localhost:3000/

It started working when I changed it to

'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',

Yep, the webpack-hot-middleware middleware needs to come before the wildcard * handler so it can match the path.

The /__webpack_hmr is a GET request, which means when you do app.get('*'), then you send the HTML along with webpack-hot-middleware. Fix it by adding route /__webpack_hmr as an exception in app.get('*').

app.get('*', (req, res) => {
   if (req.url === "/__webpack_hmr")
            return;
   //html handling here
});

For me it is coming when I upgraded nuxt 2 to use nuxt-bridge

This request is firing again n again, resulting in the same error. Anyone can help?

application/json

On Mon, Jul 24, 2017 at 12:49 AM, Farah notifications@github.com wrote:

@devarsh https://github.com/devarsh What did you set the content-type as?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/glenjamin/webpack-hot-middleware/issues/26#issuecomment-317318585, or mute the thread https://github.com/notifications/unsubscribe-auth/AHGRPsTjYZqNrGqgMx8IfoIRN1aevHsjks5sRCJNgaJpZM4GD4CV .

– Thank you for your time,

Shawn Simon McMaster Engineering iOS and Web Developer at Konrad Group

The /__webpack_hmr is a GET request, which means when you do app.get('*'), then you send the HTML along with webpack-hot-middleware. Fix it by adding route /__webpack_hmr as an exception in app.get('*').

app.get('*', (req, res) => {
   if (req.url === "/__webpack_hmr")
            return;
   //html handling here
});

Instead of only returning, I needed to force the response type to “text/event-stream”:

app.get("*", (req, res) => {
  if(req.url == "/myreverseproxy/__webpack_hmr") {
    res.type('text/event-stream');
    return; 
  }
  res.sendFile(path.resolve(__dirname, "..", "public", "index.html"));
});

Are you re-setting the req.url at any point? I was using the HtmlWebpackPlugin to generate my index.html file which caused some issues with the webpack middleware. The suggested fix was to set the req.url to simply just req.url = '/' when not one of my static or webpack middleware routes. One thing I also needed to do was to make sure i allow the url '/__webpack_hmr' to reach the webpack middleware as well so that socket can be established. I guess a hacky way would to do something like this:

// Import configs and whatever
// ...
app.get('/*', (req, res, next) => {
    if (!req.url.match('static') && !req.url.match('/__webpack_hmr') && !req.url.match('bundle.js')) {
        req.url = '/'; 
    }
    next();
});

// Webpack stuff
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true,
    publicPath: config.output.publicPath,
}));

app.use(require('webpack-hot-middleware')(compiler)); 

// Static files
app.get('/static/*', (req, res) => {
    res.sendFile(path.join(__dirname,  req.url));
});

const PORT = 8080;
app.listen(PORT, '0.0.0.0', (err) => {
    if (err) {
        throw err;
    }
    console.log(`The magic happens on port ${PORT}!`); // eslint-disable-line no-console
});

I would suggest something more eloquent but I am not really sure what your express app file looks like to suggest something better!