Getting an ERR_CONNECTION_RESET with Webpack Dev Server on port 8080

user_6525260 0
Viewed 2152

I'm following the official webpack tutorial for setting up webpack dev server. Here is my webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    // port: 8081 // <-- uncommenting this line gets rid of the error
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management',
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

However, when I try to run the server, I'm getting a weird issue. The code compiles properly according to the webpack output, but when the URL tries to open in Chrome/Safari, I get "This site can’t be reached" with ERR_CONNECTION_RESET. In the config above, when I uncomment the 8081 line, everything works as intended (except the server is now on port 8081).

Initially, I thought that the port must be occupied, but found this was not the case, since I can run a file like

var http = require('http');

http.createServer(function (req, res) {
  res.write('Hello World!');
  res.end();
}).listen(8080);

And see the expected Hello World on port 8080.

Why is webpack dev server unable to work on port 8080?

If it matters, I'm on OSX 10.15 Catalina with Node.js v12.13.0.

webpack-dev-server webpack javascript
3 Answers

for those who still can not figure this out. I found this link in github which worked really great for me.

Add this to your start script in package.json file

"start": "webpack-dev-server --config webpack/webpack.config.dev.js --host 0.0.0.0 --hot --open --useLocalIp"

this is the link for those who want to read more.

user_118460700

Using your same configuration works for me. Try checking the port status (there might be something clashing just with webpack) by:

lsof -i :8080

That will list if there is something using it, and if that's the case, take the PID number shown and:

kill -15 <PID>

PD. (This would be a comment but I can't add comments yet).

user_89666510

For me it was ESET that had blocked the port.

You can disabled it under Preferences -> Web Access Protection -> Enable HTTP protocol checking (uncheck the checkbox or change the ports).

user_42303610
Related