ECONNREFUSED error using webpack-dev-server in Motoko project

Question

I created a motoko backend and added some JavaScript and HTML for the frontend. Now I would like to deploy my project using webpack.

After the successfull deployment I get the following error interacting with the frontend:

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

Reading the documentation the frontend should run on the server http://localhost:8080 and API request will be proxyed to the replica on port 8000.

If I open port 8000 it says: Could not find a canister id to forward to.

So from my understanding, the frontend server runs and if he makes an API call (e.g. calling a function within my code) it proxys it to port 8000, but the service on this port is inactive.

The webpack.config.js config for the proxy:

  // proxy /api to port 8000 during development
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },
    hot: true,
    watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
    liveReload: true,
  },
};

UPDATE I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.

Answer 1

I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.

Answer 2

I encountered the same issue when switching from Node 16.13.0 to 18.15.0. With Node 16 everything ran fine, but with node 18.x ( and also with 17.x ) I encountered the follow error:

[webpack-dev-server] [HPM] Error occurred while proxying request 127.0.0.1:3000/ to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

It seems in Node 17.x the default way of handling DNS has changed, now looking at the AAAA records (i.e. IPv6) instead of IPv4. So the localhost IPv6 is queried instead of Node 16 behaviour where IPv4 was queried. Therefore changing it to the IPv4 adress (127.0.0.1) in webpack.config.js works ( as that's probably where your backend service is running / connected to). This is intended behaviour since Node 17, zee issue https://github.com/nodejs/node/issues/40537.

Changing the devServer -> proxy -> target to 127.0.0.1:8000 worked ( like @Dawienchi suggested) therefore works. Example:

(Errors on Node 17 / 18, as IPv6 is favoured) webpack.proxy.js:

...
devServer: {
    proxy: {
            context: ['!/pages/**'],
            target: 'http://localhost:8000/',
    },
    port: 3000,
},

(Works fine with Node 17 / 18, as going directly to IPv4) webpack.proxy.js:

...
devServer: {
    proxy: {
            context: ['!/pages/**'],
            target: 'http://127.0.0.1:8000/',
    },
    port: 3000,
},