nx: New NX project - NextJS connect ECONNREFUSED 127.0.0.1:4200

Current Behavior

My nextjs applications are no longer being served locally. While waiting for the initial build to view application locally in the browser, after a minute or two I am presented with a “connect ECONNREFUSED” error.

Expected Behavior

To view my application locally without interruption.

GitHub Repo

No response

Steps to Reproduce

pnpm dlx create-nx-workspace --packageManager=“pnpm” 1a. React Stack -> NextJs Framework -> Integrated Monorepo -> Yes to App Router -> CSS Stylesheets -> No to cache
Start application, wait several minutes. It will either not appear at all with an eventual ECONNREFUSED error, or it will appear for a few minutes before crashing with the same error.

Nx Report

Node   : 18.15.0
   OS     : win32-x64
   pnpm   : 8.6.2
   
   nx                 : 16.4.2
   @nx/js             : 16.4.2
   @nx/jest           : 16.4.2
   @nx/linter         : 16.4.2
   @nx/workspace      : 16.4.2
   @nx/cypress        : 16.4.2
   @nx/devkit         : 16.4.2
   @nx/eslint-plugin  : 16.4.2
   @nx/next           : 16.4.2
   @nx/react          : 16.4.2
   @nrwl/tao          : 16.4.2
   @nx/web            : 16.4.2
   typescript         : 5.1.6

Failure Logs

> nx run public-website:serve:development

- ready started server on localhost:4200, url: http://localhost:4200
- event compiled client and server successfully in 2s (311 modules)
- wait compiling...
- event compiled client and server successfully in 1104 ms (311 modules)
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^
Error: connect ECONNREFUSED 127.0.0.1:4200
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -4078,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 4200
}
Node.js v18.15.0

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

Updating the next package to the latest one doesn’t help either. I suspect the issue lies with NX and not NextJS because after creating an initial application with just nextjs without the use of NX, it appears to works just fine.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 11
Comments: 24 (3 by maintainers)

Commits related to this issue

fix(nextjs): updated 0.0.0.0 as default hostname (#17902) — committed to rahulretnan/nx by rahulretnan a year ago

Most upvoted comments

I solved the issue by adding, hostname value as 0.0.0.0 in the project.json

"serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "myapp:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "myapp:build:development",
          "dev": true,
          "hostname": "0.0.0.0"
        },
        "production": {
          "buildTarget": "myapp:build:production",
          "dev": false
        }
      }
    }

rahulretnan on Jul 1, 2023

I just learned that NextJS doesn’t even use the React version you install in your NPM lib when using the app directory. Next is the current lovechild of the front-end community, but that lib seriously breaks a lot of expected conventions.

It seems that this hostname fix is more of a hack? It would nice to know what the real issue is under the hood. The last couple NextJS updates have also caused my project to run out of memory every 30m or so (in dev mode)

Brian-McBride on Jul 1, 2023

@olegshilov

Thank you - I think we have found our issue now. We had the hostname in our Next.js project.json files set to ‘localhost’. Removing this line from the project.json files seemed to fix the problem.

podjames on Jul 7, 2023

@podjames

I am still seeing the same issue even after upgrading to the latest nx version- we are on nx@16.5.0 and next@13.4.8. Falling back to next@13.3.0 also doesn’t seem to help. Node version is 18.16.1.

Reverting to using Node 16 seems to fix it.

You can try nx reset. If it’s doesn’t not help, try to remove lockfile and reinstall dependencies btw. We use latest NextJS and after update all works as expected

olegshilov on Jul 6, 2023

Can you upgrade to the latest version of Nx? We just published v16.5.0.

Initially, we thought that having the defaulted localhost as the hostname would be fine but there it’s actually an issue with Node: https://github.com/nodejs/node/issues/40537. We reverted that change and that has been published

Here is a repo of a fresh app: https://github.com/ndcunningham/issue-17902

ndcunningham on Jul 6, 2023

What version of Next is everyone using? These may be partially related:

I think the last one is the fix. Using node 16 works for me, but not node >16

michaelangeloio on Jul 5, 2023

Same issue here, went from 16.3.2 to 16.4.2 and cannot develop locally on mac:

node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^
Error: connect ECONNREFUSED 127.0.0.1:4200
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 4200
}
Node.js v18.12.1

MartinDavi on Jul 3, 2023

This started happening to me after upgrading from 16.4.0 to nx 16.4.2

I run 4 next.js apps locally for dev, all with “nx serve”

I also noticed a huge difference in the memory usage of each node process involved:

In 16.4.0, each node process remains between 724 MB and 1005 MB.
In 16.4.2, each node process keeps growing until they get over 4400MB and cause my Mac to run out of RAM.

charleskoehl on Jul 2, 2023