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

[webpack-contrib]

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

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

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

[glenjamin]

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

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

[shawn-simon-developer]

application/json

…

On Mon, Jul 24, 2017 at 12:49 AM, Farah ***@***.***> 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 <#26 (comment)>, 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

[psahni]

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?

[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!

[arthurmenezesb]

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

[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

[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.

[hieuit7]

The same problem, i configure https proxy via nginx

[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?

[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.