Create-react-app: [email protected] fails with an Error: getaddrinfo ENOTFOUND

[halfzebra]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Not relevant.

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

1. node -v: v9.7.1
2. npm -v: v5.6.0
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected):

Then, specify:

1. Operating system:
   MacOSX Sierra 10.12.6
   MacOSX Sierra 10.13.3
2. Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

1. npm run start # fresh installation

Expected Behavior

If it's an error caused by the system configuration, it probably should suggest something meaningful.

Actual Behavior

This issue has been reported on a bunch of different repositories:
https://github.com/halfzebra/create-elm-app/issues/239
https://github.com/node-modules/detect-port/issues/29

The original maintainer @fengmk2 says it has been fixed in the original detect-port package.

Reproducible Demo

Not available.

[greglearns]

A temporary solution:

Looking at create-react-app/packages/react-scripts/scripts/start.js, it appears that you can pass in environment variables:
Set the HOST env variable. e.g. HOST=localhost
And, optionally, also set the PORT=5000 or whatever port you want to use.

[bugzpodder]

I couldn't get the above solution to work, so I just manually edited node_modules/detect-port-alt/lib/detect-port.js and removed the checks around return callback as shown below.
listen(port, host, (err, realPort) => {
// ignore random listening
return callback(err, realPort);

[gaearon]

Maybe we need to cherry-pick this fix? https://github.com/node-modules/detect-port/commit/792bccdd4e0ac716ba5fd8c4a0dd0333525b3911

[halfzebra]

@greglearns most likely this is the solution!

How do we help to cherry-pick that stuff intodetect-port-alt?

[gaearon]

@timer might find time to do it

[Timer]

https://github.com/facebook/create-react-app/pull/4250

[Timer]

This will be out in 1.1.4.

[Timer]

This is now released in [email protected].

[gaearon]

Thanks!

[pigcan]

@Timer @greglearns

[email protected] still has the bug

// 1. check specified host (or null)
  listen(port, host, (err, realPort) => {
    // ignore random listening
    if (port === 0) {
      return callback(err, realPort);
    }

    if (err) {
      return handleError(err);
    }

    // 2. check default host
    listen(port, null, err => {
      if (err) {
        return handleError(err);
      }

      // 3. check localhost <------localhost should be optional, it depends on /etc/hosts
      listen(port, 'localhost', err => { 
        if (err) {
          return handleError(err);
        }

[pigcan]

And what's the difference between detect-port-alt and detect-port? Why not send a PR to dectect-port? If you think it is necessary to fork detect-port so please let us know the repo address then I can make a PR for you.