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

[f15gdsy]

Hi, I got the following error in browser when using this middleware, any idea what it mean?

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

[glenjamin]

Have you reconfigured the paths at all? Are you using an intermediary proxy?

Can you show the output of the network tab?

This error means the event stream URL is incorrectly claiming to be HTML for some reason

[pburtchaell]

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

[glenjamin]

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

[devarsh]

The same error occurred to me when i did not set the content-type for the file, so just make sure you're setting the content-type for the file.

[concubicycle]

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

[hieuit7]

The same problem, i configure https proxy via nginx

[shawn-simon-developer]

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!

[Pines-Cheng]

meet the same question. and I use the nginx proxy. still have no way.

[Pines-Cheng]

It works only I add this line in the entry of webpack.

'index': [
    'webpack-hot-middleware/client?path=http://localhost:'+siteConfig.port+'/__webpack_hmr',  //this line
    './js/index'
  ]

[abzfarah]

@devarsh What did you set the content-type as?

[shawn-simon-developer]

application/json

On Mon, Jul 24, 2017 at 12:49 AM, Farah [e-mail] 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

[jephjohnson]

Commenting out "webpack-hot-middleware/client" in my webpack.config.js solved this for me

[aniketfuryrocks]

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

[divmgl]

Commenting out "webpack-hot-middleware/client" in my webpack.config.js solved this for me

Funnily enough this solved it for me as well. This is likely due to the fact that the webpack-hot-middleware plugin is getting instantiated somewhere else.