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

[f15gdsy]

[glenjamin]

Closing in favour of #26

[hacke2]

how resolve ?

[glenjamin]

The problem in #26 was that another route handler was handling the request before this middleware.

[hacke2]

@glenjamin thanks!

[railsfactory-robin]

hi @glenjamin I am trying to build an application with react, as the first step I configured webpack with webpack-hot-middleware, when am running my application the changes are not updating in the browser and am also getting an error "EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection" in the browser console. im putting my codes here give me a solution,

/**

• Webpack configuration for development
  */
  import path from 'path';
  import webpack from 'webpack';

export default {
devtool: 'eval-source-map',
entry: [
path.join(process.cwd(), 'src/index'),
'webpack-hot-middleware/client?reload=true',
],
output: {
filename: 'bundle.js',
path: path.join(process.cwd(), 'public', 'js'),
publicPath: '/js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
module: {
rules: [
{
enforce: 'pre',
test: /.js(x)?$/,
use: 'eslint-loader',
},
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
plugins: ['transform-inline-environment-variables'],
},
},
exclude: /node_modules/,
},
{
test: /.json$/,
use: 'json-loader',
},
{
test: /.(s)?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /.svg$/,
use: 'svg-inline-loader',
},
{
test: /.(jpe?g|png|gif|ico)$/i,
use: 'file-loader',
},
],
},
target: 'web',
};

file no 2:

/**

• Webpack dev server
  */
  import webpack from 'webpack';
  import webpackDevMiddleware from 'webpack-dev-middleware';
  import webpackConfig from './config.babel';
  export default (app) => {
  const webpackCompiler = webpack(webpackConfig);
  // use dev middleware
  app.use(webpackDevMiddleware(webpackCompiler, {
  // defines the level of messages to log
  logLevel: 'warn',
  // public path to bind the middleware to
  publicPath: webpackConfig.output.publicPath,
  }));
  };

file no 3

/**

• app.js
  */
  import express from 'express';
  import path from 'path';
  import dotenv from 'dotenv';
  import logger from 'morgan';
  import bodyParser from 'body-parser';
  import cookieParser from 'cookie-parser';
  import webpackDevServer from './webpack/dev-server';
  import routes from './routes';

// Express app setup
const app = express();
// view engine
app.set('views', path.join(__dirname, './views'));
// serve static files from 'public'
app.use(express.static(path.join(__dirname, './public')));
app.set('view engine', 'pug');
// logger
app.use(logger('combined'));
// body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// cookie parser
app.use(cookieParser());
// use routes
app.use('/', routes);

// error handlers
app.use((err, req, res, next) => {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: app.get('env') === 'development' ? err : {},
});
next();
});

app.use((req, res, next) => {
const err = new Error('Not Found');
err.status = 404;
next(err);
});
// use dotenv
dotenv.config({
silent: true,
});
// include webpack-dev-server for development only
if (process.env.NODE_ENV !== 'production') {
webpackDevServer(app);
}

export default app;