Unexpected freezing and infinite loop when using localhost instead of 127.0.0.1

[nbouvrette]

As requested by @bahmutov @MikeMcC399 - this is the new issue related to #333 and was meant to be resolved by start-server-and-test ^2.0.0

This issue seems to impact mostly macOS version 13+ (I'm on macOS 13.2.1)

How to reproduce:

1. Clone https://github.com/Avansai/next-multilingual
2. Open package.json and make sure that all the 127.0.0.1 are replaced by localhost
3. run npm install
4. Add the new script: "tmp-test": "cross-env DEBUG=start-server-and-test npm run e2e-build-headless"
5. run npm run tmp-test

You will see the following debug logs:

next-multilingual git:(main) ✗ npm run tmp-test

> [email protected] tmp-test
> cross-env DEBUG=start-server-and-test npm run e2e-build-headless


> [email protected] e2e-build-headless
> cross-env CYPRESS_isProd=true start-server-and-test start-example-build http://localhost:3000 cypress-headless

  start-server-and-test initial parsed arguments { _: [ 'start-example-build', 'http://localhost:3000', 'cypress-headless' ] } +0ms
  start-server-and-test named arguments: { expect: undefined, '--expected': '--expect' } +0ms
  start-server-and-test initial parsed arguments { _: [ 'start-example-build', 'http://localhost:3000', 'cypress-headless' ] } +2ms
  start-server-and-test parsing CLI arguments: [ 'start-example-build', 'http://localhost:3000', 'cypress-headless' ] +0ms
  start-server-and-test parsed args: { services: [ { start: 'npm run start-example-build', url: [Array] } ], test: 'npm run cypress-headless' } +0ms
1: starting server using command "npm run start-example-build"
and when url "[ 'http://localhost:3000' ]" is responding with HTTP status code 200
running tests using command "npm run cypress-headless"

  start-server-and-test single service "npm run start-example-build" to run and test +0ms
  start-server-and-test starting server with command "npm run start-example-build", verbose mode? true +0ms
  start-server-and-test starting waitOn [ 'http://localhost:3000' ] +3ms
  start-server-and-test wait-on options { resources: [ 'http://localhost:3000' ], interval: 2000, window: 1000, timeout: 300000, verbose: true, strictSSL: true, log: true, headers: { Accept: 'text/html, application/json, text/plain, */*' }, validateStatus: [Function (anonymous)] } +0ms
waiting for 1 resources: http://localhost:3000
making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000

> [email protected] start-example-build
> cd example && rm -Rf .next && npm run build && npm run start


> build
> cross-env ../node_modules/.bin/next build

info  - Loaded env from /Users/nbouvrette/Projects/next-multilingual/example/.env.production
warn  - You have enabled experimental feature (esmExternals) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Linting and checking validity of types .making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
info  - Linting and checking validity of types .making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
info  - Linting and checking validity of types  
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /Users/nbouvrette/Projects/next-multilingual/example/.babelrc
info  - Creating an optimized production build .making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
info  - Creating an optimized production build ...making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (201/201)
info  - Finalizing page optimization  

Route (pages)                                                                                                       Size     First Load JS
┌ λ /                                                                                                               2.15 kB         132 kB
├   /_app                                                                                                           0 B            99.1 kB
├ ○ /404                                                                                                            489 B           130 kB
├ ○ /500                                                                                                            496 B           130 kB
├ ○ /about-us                                                                                                       611 B           130 kB
├ λ /api/hello                                                                                                      0 B            99.1 kB
├ ○ /contact-us                                                                                                     818 B           130 kB
├   └ css/ce62caf524188c44.css                                                                                      826 B
├ ○ /contact-us/message-sent                                                                                        464 B           130 kB
├ ○ /tests/anchor-links                                                                                             2.5 kB          132 kB
├ ○ /tests/anchor-links/long-page                                                                                   2.31 kB         132 kB
├ λ /tests/custom-error-page                                                                                        543 B           130 kB
├ ○ /tests/dynamic-routes                                                                                           892 B           130 kB
├   └ css/800f675d941c42ed.css                                                                                      808 B
├ ○ /tests/dynamic-routes/catch-all                                                                                 1.54 kB         131 kB
├   └ css/bf17edfca951b198.css                                                                                      768 B
├ ● /tests/dynamic-routes/catch-all/[...country] (389 ms)                                                           1.14 kB         131 kB
├   └ css/a40c443a74b4f904.css                                                                                      730 B
├   ├ /en-us/tests/dynamic-routes/catch-all/united-states-of-america
├   ├ /en-us/tests/dynamic-routes/catch-all/united-states-of-america/test-page-for-catch-all-dynamic-routes
├   ├ /en-us/tests/dynamic-routes/catch-all/united-states-of-america/this-is-the-catch-all-dynamic-route-test-page
├   └ [+51 more paths]
├ ● /tests/dynamic-routes/catch-all/category/[[...category]] (541 ms)                                               1.16 kB         131 kB
├   └ css/e6d9ae7b90b9e8af.css                                                                                      732 B
├   ├ /en-us/tests/dynamic-routes/catch-all/category
├   ├ /en-us/tests/dynamic-routes/catch-all/category/family
├   ├ /en-us/tests/dynamic-routes/catch-all/category/family/category
├   └ [+65 more paths]
├ ○ /tests/dynamic-routes/identifier                                                                                1.32 kB         131 kB
├   └ css/02a1dd1ba9487ab1.css                                                                                      808 B
├ ● /tests/dynamic-routes/identifier/[id]                                                                           1.04 kB         131 kB
├   └ css/d32221824cb8cb43.css                                                                                      872 B
├   └ /mul/tests/dynamic-routes/identifier/123
├ ○ /tests/dynamic-routes/text                                                                                      1.53 kB         131 kB
├   └ css/f63d3992eea5ba32.css                                                                                      810 B
├ ● /tests/dynamic-routes/text/[cityName]                                                                           1.14 kB         131 kB
├   └ css/15932671a57453ef.css                                                                                      877 B
├   ├ /en-us/tests/dynamic-routes/text/montreal
├   ├ /en-us/tests/dynamic-routes/text/london
├   ├ /en-us/tests/dynamic-routes/text/shanghai
├   └ [+3 more paths]
├ ● /tests/dynamic-routes/text/[cityName]/point-of-interest                                                         2.24 kB         132 kB
├   └ css/8acedaf7c00f3d81.css                                                                                      813 B
├   ├ /en-us/tests/dynamic-routes/text/montreal/point-of-interest
├   ├ /en-us/tests/dynamic-routes/text/london/point-of-interest
├   ├ /en-us/tests/dynamic-routes/text/shanghai/point-of-interest
├   └ [+3 more paths]
├ ● /tests/dynamic-routes/text/[cityName]/point-of-interest/[poi]                                                   1.08 kB         131 kB
├   └ css/8b7c5bd085a21450.css                                                                                      873 B
├   ├ /en-us/tests/dynamic-routes/text/montreal/point-of-interest/bonsecours-market
├   ├ /en-us/tests/dynamic-routes/text/montreal/point-of-interest/mount-royal-park
├   ├ /en-us/tests/dynamic-routes/text/montreal/point-of-interest/old-port
├   └ [+15 more paths]
└ ○ /tests/jsx-injection                                                                                            2.37 kB         132 kB
    └ css/8657a83eb2aec1ee.css                                                                                      743 B
+ First Load JS shared by all                                                                                       99.2 kB
  ├ chunks/framework-af64bd368ed34feb.js                                                                            45.2 kB
  ├ chunks/main-28cb1db53890d295.js                                                                                 36.7 kB
  ├ chunks/pages/_app-6dfa98c01a87d206.js                                                                           15 kB
  ├ chunks/webpack-c42a931f31636e75.js                                                                              2.09 kB
  └ css/7789a9bd44560554.css                                                                                        120 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)


> start
> cross-env ../node_modules/.bin/next start

making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/nbouvrette/Projects/next-multilingual/example/.env.production
warn  - You have enabled experimental feature (esmExternals) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000
^C%                                                                              

[MikeMcC399]

@nbouvrette

Thanks for the logs and information!

The logs show:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

making HTTP(S) head request to  url:http://localhost:3000 ...
  HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000

---

For comparison:

In my own different test Next.js environment on Ubuntu (simple starter). I see it is successfully trying to contact http://localhost:3000 via ::1:3000.

On ubuntu

netstat -lnt | grep 3000

showed

tcp6       0      0 :::3000                 :::*                    LISTEN

• curl -I http://localhost:3000 was successful HTTP/1.1 200 OK
• curl -I http://[::1]:3000 was successful HTTP/1.1 200 OK

I suspect on your system that you may get a different result for netstat -lnt | grep 3000 and that curl -I http://[::1]:3000 will fail. If that is the case you might be able to get help from your Next.js community or Stackoverflow to get the server to also listen on the IPv6 address ::1.

(I cloned your repository and tried to follow your instructions in an Ubuntu environment, however that didn't work for me. I don't want to spend time now getting that to work as your debug logs showed enough of the problem. Also I don't have a macOS system so even if it did work for me I can't be sure that I am emulating your environment.)

[nbouvrette]

On macOS 13.2.1, netstat -lnt | grep 3000:

tcp6       0      0  ::1.3000                                      ::1.61369                                     ESTABLISHED
tcp6       0      0  ::1.61369                                     ::1.3000                                      ESTABLISHED
tcp6       0      0  ::1.3000                                      ::1.61368                                     ESTABLISHED
tcp6       0      0  ::1.61368                                     ::1.3000                                      ESTABLISHED

And

• curl -I http://localhost:3000 was successful HTTP/1.1 200 OK
• curl -I http://[::1]:3000 was successful HTTP/1.1 200 OK

[MikeMcC399]

@nbouvrette

Thanks for the additional debug information. I don't understand in that case why

HTTP(S) error for http://localhost:3000 Error: connect ECONNREFUSED ::1:3000

is happening. It probably needs somebody with better network know-how than I have to work out why it's failing.

Edit: The command netstat -lnt | grep 3000 is for Ubuntu and it may not be exactly right for macOS. See if you can find how to display listeners on macOS. That was the intention.

[MikeMcC399]

@nbouvrette

There is a possibility that you could start your server on host 0.0.0.0 and that your results might be different doing that. Check your documentation. -h 0.0.0.0 might do it. I have had mixed results with similar experiments. On Vite --host made a positive difference, with react HOST=0.0.0.0 didn't help.

[MikeMcC399]

@nbouvrette

Regarding your repository https://github.com/Avansai/next-multilingual , if you want to make this better to use, I would suggest to create a new branch with your changes in it, then test it by cloning to a clean system. That way you can see if there is anything missing. I suspect that you may have some modules globally installed.

I cloned https://github.com/Avansai/next-multilingual
I guessed you meant npm install not npm run install

npm run e2e for instance gives
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@next/bundle-analyzer'

[nbouvrette]

@MikeMcC399 the netstat command I ran was showing listener - my port 3000 is the one that was of interest (running Next.js)

Regarding your suggestion to use -h 0.0.0.0 - for me it's the same as just using 127.0.0.1 in my scripts - basically a workaround. I do have a workaround already. This issue was meant to find a fix to the issue.

Regarding https://github.com/Avansai/next-multilingual, you are correct, you need to run npm install (I updated the original instructions)

There are no global modules installed, the instructions should work as-is - if not please let me know and I will update anything that might be missing.

I have shared this repository on several other GitHub issues in other repos and it usually works well without needing to create a branch. If there is any issue reproducing the problem, I can try to create a minimal-reproduction repo just for this but of course, this will take more time for me to get setup

[MikeMcC399]

@nbouvrette

Thanks very much for your detailed answer! I do understand that you are looking for a "proper" fix! I logged a separate issue jeffbski/wait-on#137 regarding the underlying technology in an attempt to get a proper fix. From my point of view there isn't a need to research your issue any deeper, since it is already clear.

• The simplest outcome would be if the issue wait-on failure for localhost of react-app Node.js 18 jeffbski/wait-on#137 were to be resolved with a new release of wait-on. Hopefully there will be a response from the maintainer there soon.
• Another theoretical possibility would be to move start-server-and-test to use the fork https://github.com/metcoder95/wait-on where the issue is resolved, however it seems that the creator of the fork doesn't intend it to be a long-term solution.

You don't need to do anything more on your repo for my benefit. Thanks for correcting the typo about the npm install command in any case!