webpack-dev-server not running (ECONNREFUSED)

Question

I'm having some troubles with webpack, after some commits I tried to run the server but nothing appear at http://localhost:3000. The config seems OK and this already worked meanwhile. Any suggestions are welcome. At webpack.config, I tried to use 127.0.0.1 instead localhost keyword and didn't worked. Also, changing http to https and didn't change to better.

The console output:

> webpack-dev-server --config webpack.config.js --mode development --hot

[HPM] Proxy created: [ '/' ]  ->  http://localhost:3000
ℹ ｢wds｣: Project is running at http://localhost:8085/
ℹ ｢wds｣: webpack output is served from /build
ℹ ｢wds｣: Content not from webpack is served from /build/
ℹ ｢wds｣: 404s will fallback to /index.html
[HPM] Error occurred while trying to proxy request / from localhost:8085 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[BABEL] Note: The code generator has deoptimised the styling of /node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: Hash: 267d8ae083c789a0e40f
Version: webpack 4.44.2
Time: 12214ms
Built at: 03/27/2021 10:21:06 PM
            Asset      Size  Chunks             Chunk Names
     ./index.html   1.7 KiB          [emitted]  
          dam.ico  66.1 KiB          [emitted]  
webpack-bundle.js  3.05 MiB    main  [emitted]  main
Entrypoint main = webpack-bundle.js

The webpack.config.js :

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "webpack-bundle.js",
    publicPath: path.resolve(__dirname, "/build/"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: ["/node_modules/", "/src/styles.css"],
      },
      {
        test: /\.(css)$/,
        loaders: ["style-loader", "css-loader"],
      },
       {
        test: /\.(jpg|png)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",  // reference index.html file
      filename: "./index.html",         // the name and location of referenced file at output folder
      favicon: "public/dam.ico",
    }),
  ],
  devServer: {
    publicPath: path.resolve(__dirname, "/build/"),
    contentBase: "/build/",              // path that contain webpack-bundle
    port: 8085,                          // port where the app will be accessible
    hot: true,
    open: true,                          // open web browser after compiled
    historyApiFallback: true,
    proxy: [
      {
        context: ["/"],                  // endpoint which you want to proxy the provider
        target: "http://localhost:3000",     // your main server address - react app provider
      },
    ],
  },
};

The package.json:

{
  "name": "ediawater",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@react-google-maps/api": "^2.1.1",
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.21.1",
    "bootstrap": "4.5.3",
    "google-map-react": "^2.1.9",
    "prop-types": "^15.7.2",
    "pubsub-js": "^1.9.3",
    "react": "17.0.0",
    "react-bootstrap": "1.4.0",
    "react-dom": "17.0.0",
    "react-grid-layout": "1.2.0",
    "react-json-to-csv": "^1.0.4",
    "react-laag": "^2.0.2",
    "react-redux": "^7.2.2",
    "react-scripts": "^4.0.1",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev-start": "webpack-dev-server --config webpack.config.js --mode development --hot",
    "dev-build": "webpack --config webpack.config.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "css-loader": "^5.1.0",
    "eslint": "^7.17.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.22.0",
    "prettier": "^2.2.1",
    "reactide-config": "^1.0.2",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.7.0"
  }
}

It seems that is running, because there is node and npm processes. And I checked that on node it's only running the proxy: ``node.84964 tcp4 127.0.0.1:8085<->*:*`` — bmalbusca, Mar 27 '21 at 23:04
Check out [this](https://stackoverflow.com/q/29576341/7574023) — boolfalse, Mar 28 '21 at 00:25
@boolfalse It solves the Babel warning, but the problem persists. — bmalbusca, Mar 28 '21 at 13:13
@bmalbusca `node.84964 tcp4 127.0.0.1:8085<->*:*` is the webpack dev server, but is there anything listing on port `3000`? — kelunik, Apr 01 '21 at 19:39
thank you for your suggestion @choz, I think the default port for webpack-dev-server in dev mode is 3000. But I changed to 9000 and 8080, the result was the same — bmalbusca, Apr 01 '21 at 19:46
@kelunik that was the first red flag that I found, I only see the proxy running — bmalbusca, Apr 01 '21 at 19:48
May I ask you to upload a reproduction of your issue to GitLab or GitHub? I wanna get your code and work on it. — AmerllicA, Apr 02 '21 at 11:26
Hi, @AmerllicA, the issue is already solved. The bug was the fact of not using the absolute path on contentBase. — bmalbusca, Apr 02 '21 at 13:18

shusson · Accepted Answer · 2021-04-01T23:34:19.207

1

If you setup a proxy in the config, you (the dev) are expected to run a server where things are being proxied to e.g at http://localhost:3000. Webpack devserver does not create the proxied server for you. The proxy setting is commonly used to proxy api calls e.g

    proxy: {
      '/api': 'http://localhost:3000',
    },

So if you do not have a reason to proxy, e.g an api, remove the proxy settings and use the devserver port e.g localhost:8085.

More info in the docs.

Also the contentBase should be an absolute path.

edited Apr 01 '21 at 23:34

answered Apr 01 '21 at 21:52

shusson

5,542
34
38

Right, the intention is having a well defined endpoint but this does not solve the problem. I removed the proxy and I'm still having the problem of getting `Cannot GET /` . – bmalbusca Apr 01 '21 at 22:42
1

@bmalbusca that is a different problem, but I think you are getting closer to a working config. Have you checked the documentation for https://webpack.js.org/configuration/dev-server/#devservercontentbase and https://webpack.js.org/configuration/dev-server/#devserverpublicpath- ? – shusson Apr 01 '21 at 22:53
1

Yes, the configuration is almost based on that doc. The main difference, comparing with the official examples, is having a relative path of `build` instead a global ref path. I changed that and it worked Can you change your answer with this for future searches?Also to give you the bounty – bmalbusca Apr 01 '21 at 23:24

webpack-dev-server not running (ECONNREFUSED)

1 Answers1