Create-react-app: UnhandledPromiseRejectionWarning on Node 7.7.2

[cschroeter]

Description

Bug

Expected behavior

npm start

should not return a UnhandledPromiseRejectionWarning

Actual behavior

cschroeter@pc:~/workspace/my-first-react-app$ npm start

> [email protected] start /home/cschroeter/workspace/my-first-react-app
> react-scripts start

(node:1863) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: "listener" argument must be a function
(node:1863) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):

cschroeter@pc:~/workspace/my-first-react-app$ npm ls react-scripts
[email protected] /home/cschroeter/workspace/my-frist-react-app
└── [email protected]

1. node -v:

v7.7.2

1. npm -v:

4.3.0

Then, specify:

1. Operating system:
   Windows 10 in Linux Bash Shell Build 15048 (Creator Update)

To Reproduce

$ create-react-app my-first-react-app
$ cd my-first-react-app
$ npm start

[whelmich]

Can reproduce in Linux Mint 18.1 with the same node/npm versions.

Problem can be resolved by downgrading node to 7.7.1 or older. The problem appeared after upgrading node to 7.7.2.

[whelmich]

This problem seems to be caused by detect-port:1.0.1, used by react-scripts. It causes an error in detect-port/lib/detect-port.js on line 61 socket.connect(...).

detect-port is currently at version 1.1.0 which features a different approach of port detection. This version resolves the error for node v7.7.2, and also works with 7.6.0 and 7.7.1.

The Travis build test of version 1.1.0 of detect-port seems to fail, because the test is using node v4.8.0. On node 7.6.0, 7.7.1 and 7.7.2 the tests complete without any problems.

As the minimum node version of react-scripts is >=4 I am not sure if upgrading the version of detect-port in package.json in react-scripts is an acceptable solution as detect-ports:1.1.0 only passes its test on node version >=6.

[Timer]

We do not support Node 7, so the official recommendation would be to downgrade to the latest LTS.
Currently, that is Node v6.10.0.

However, we understand this might be desirable. Would one of you like to send a PR adding Node 7 to the CI (only one of the test cases) and resolving this issue?
Thanks!

/cc @whelmich

[gaearon]

(We definitely should support Node 7 tho)

[taivu]

I get the same error in MacOS El Capitan and Ubuntu (both node 7). Weird thing is that in Ubuntu it still runs and starts the server, but doesnt detect any changes to files. In MacOS, it just quits.

[Timer]

(We definitely should support Node 7 tho)

We should probably run all test cases on Node 7 then. 🤷‍♀️

Node 8 comes out in a month though, which I assume means we would drop Node 7 support. Worth waiting?

[gaearon]

I don't think we should skip supported versions, it would be confusing.

[vhain]

It can be bug of Node 7.7.2 and if it is, it should be fixed by https://github.com/nodejs/node/pull/11762

+i think that promise should be catch somewhere

[Timer]

Ah, brilliant @vhain! This definitely looks like a regression then. 😄

[whelmich]

After upgrading detect-port in react-scripts to 1.1.0, I can run create-react-app without any issues on node 4.8.0, 6.10.0 and 7.7.2. So upgrading it could still be a solution, without impacting the minimal node version.

Travis/tests failing on detect-port:1.1.0 with node <6 as mentioned earlier, seem to be related to its test dependency only. It doesn't withhold the package from working on node <6 when used with react-scripts. Though, I'm not sure if this may influence any other create-react-app tests somehow.

[gaearon]

Want to send a PR enabling tests on Node 7 + bumping the version?

[vhain]

@whelmich yeah, it's because of this line of commit removed code occurring issue of Node 7.7.2

[gaearon]

Workaround merged in #1783.

[gaearon]

0.9.5 is out with the fix.
https://github.com/facebookincubator/create-react-app/releases/tag/v0.9.5

[Andreyco]

@gaearon Is it possible for CRA not to run on so-much-random ports? Previous behaviour was great - start with port 3000 and pick first available port.

[gaearon]

@Andreyco

I didn’t realize that changed. Filed as https://github.com/node-modules/detect-port/issues/15 — let’s see what the maintainer says.

[Andreyco]

Thanks for filling the issue. Will follow the other thread as well.

[Timer]

That's going to be a lot of code to re-introduce (https://github.com/node-modules/detect-port/pull/13), maybe we should fork it.

[viankakrisna]

or maybe we can pin it to 1.0.7 https://github.com/node-modules/detect-port/blob/1.0.7/lib/detect-port.js#L45 meanwhile

edit:
ah, sorry, didn't follow the thread. yeah we could just fork it

[gaearon]

I’m curious what was the reasoning behind that change.

[Timer]

Probably just less to maintain and pushing the responsibility onto the Node internals.

[mnemanja]

I wanted to mention that I have the same error happening for me on Win10, node 6,9.0 and 6.10.0 when I run yarn test.
I've recently updated the CRA to 0.9.5.

I can confirm that the clean CRA app doesn't show that error. Would it be possible to have a bit more precise report?

[Andreyco]

@mnemanja must be issue with dependency definition on your end then.

# Run on existing app
yarn remove react-scripts
yarn add react-scripts --dev

[mnemanja]

That's some fast response. Thanks! :)

The remove and add didn't help unfortunately.
Adding catch helped, but the "UnhandledPromiseRejectionWarning:" message is still here.

"devDependencies": {
    "react-scripts": "^0.9.5",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "deep-equal": "^1.0.1",
    "is-equal": "^1.5.5",
    "jquery": "^3.1.1",
    "material-ui": "^0.17.0",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-grid-layout": "^0.13.9",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "redux-saga": "^0.14.3",
    "reselect": "^2.5.4",
    "whatwg-fetch": "^2.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

[mnemanja]

I wanna state that for me this isn't a blocking problem, just a pesky one :)

[gaearon]

Try deleting node_modules and running install again.
Also make sure your yarn.lock doesn't have the old version somehow.

[Timer]

If the problem persists after that, please run npm ls detect-port and we can see what version[s] are installed.
Be sure not to use yarn ls detect-port, as it's buggy.

[mnemanja]

@gaearon
Thanks,
removing node_modules completely and installing all the dependencies fixed the issue for me.

Thanks for the hint @Timer, I'll be sure to remember it next time something like this happens.

Keep up the good work guys :)

[gaearon]

Looks like we need to bump detect-port to 1.1.1: https://github.com/node-modules/detect-port/pull/16#issuecomment-287391497

PR, anyone?

[Andreyco]

cc @gaearon PR opened #1861
Can confirm, detect-port picks next available port as expected.

[taykcrane]

For any newbies running into this bug, I fixed it by downgrading NPM to the LTS (latest stable version) of 6.11.2.

[davidcalhoun]

Had a similar issue using npm to install. Fixed by removing both npm-modules and package-lock.json (a variant of @gaearon's comment above)

[shiziChing]

说中文撒大佬们