Create-react-app: [email protected] installation error while creating App

[annjawn]

Is this a bug report?

Yes. (most likely related to issue #6764)

Did you try recovering your dependencies?

Yes, but this issue is related to errors encountered during creation of a CRA app via either of the commands below-

npx create-react-app my-app
npm init react-app my-app

Which terms did you search for in User Guide?

Create App, Create project

Environment

Environment:
OS: macOS 10.14.4
Node: 11.12.0
Yarn: Not Found
npm: 6.7.0
Watchman: 4.9.0
Xcode: Xcode 10.2 Build version 10E125
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.8.4 => 16.8.4
react-dom: ^16.8.4 => 16.8.4
react-scripts: 2.1.8 => 2.1.8

Steps to Reproduce

1. Execute npx create-react-app my-app
2. Or execute npm init react-app my-app
3. Or execute create-react-app my-app

Expected Behavior

The project creation should complete without any error.

Actual Behavior

While creating a CRA project the following errors are encountered-

> [email protected] install /Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents
> node install

gyp ERR! configure error
gyp ERR! stack Error: Command failed: /Users/anjan/miniconda3/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:297:12)
gyp ERR! stack     at ChildProcess.emit (events.js:197:13)
gyp ERR! stack     at maybeClose (internal/child_process.js:988:16)
gyp ERR! stack     at Socket.stream.socket.on (internal/child_process.js:404:11)
gyp ERR! stack     at Socket.emit (events.js:197:13)
gyp ERR! stack     at Pipe._handle.close (net.js:611:12)
gyp ERR! System Darwin 18.5.0
gyp ERR! command "/usr/local/Cellar/node/11.12.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" "--module_name=fse" "--module_path=/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64" "--napi_version=4" "--node_abi_napi=napi"
gyp ERR! cwd /Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents
gyp ERR! node -v v11.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/11.12.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node --module_name=fse --module_path=/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64 --napi_version=4 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:197:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:988:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Darwin 18.5.0
node-pre-gyp ERR! command "/usr/local/Cellar/node/11.12.0/bin/node" "/Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/anjan/Documents/VendorPortal/development/test/node_modules/fsevents
node-pre-gyp ERR! node -v v11.12.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.0
node-pre-gyp ERR! not ok

The app works fine however I am not sure of future impacts of the error encountered while installing fsevents. Unclear if this can be safely ignored or node or npm version must be downgraded. The issue can be re-created at will.

Screenshot-

Reproducible Demo

Just run any of the commands below with the version of npm and node shown above-

npx create-react-app my-app
npm init react-app my-app

[kaiwen-zhang-ck]

seems like no one is responding to this.

[iansu]

This is almost certainly because you're running Node 11. Compilation of native modules with node-pre-gyp breaks frequently on new versions of Node. Try using Node 10 instead.

[annjawn]

Yes. This indeed is an issue with Node 11. I am now using Node 10 and this error is not appearing anymore.

[Prophet32j]

I am running Node v10.15.0 and npm v6.4.0, and I am getting the same error.

However, unlike annjawn, I can't run the app at all.

[ianschmitz]

Can you try our latest release (3.0)? We updated fsevents and I'm hoping it has fixed the problem.

[Prophet32j]

3.0 didn't work either. I had to downgrade my node version back to 10.7 in order to get any version of the project to work.

[annjawn]

I am running Node v10.15.2 and so far it seems to have worked for me.

[fuegod03]

I have the same problem, I'm running node 10.15.3

[fuegod03]

Never mind I just re-install it in a different folder and used "npm init react-app ."

[nareshbhatia]

I am running node v12.1.0 and running into the same problem:

WKMUS9827457:projects narbhati$ npx create-react-app d3plus-demo

Creating a new React app in /Users/narbhati/projects/d3plus-demo.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.16.0
[1/4] 🔍  Resolving packages...
warning react-scripts > [email protected]: Please update: there are crash fixes
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
[4/4] 🔨  Building fresh packages...
[-/2] ⠈ waiting...
warning Error running install script for optional dependency: "d3plus-demo/node_modules/chokidar/node_modules/fsevents: Command failed.
Exit code: 1

If I try to run the app, I get the following error:

d3plus-demo/node_modules/chokidar/lib/fsevents-handler.js:28
  return (new fsevents(path)).on('fsevent', callback).start();
          ^

TypeError: fsevents is not a constructor
    at createFSEventsInstance (d3plus-demo/node_modules/chokidar/lib/fsevents-handler.js:28:11)

The only way to install correctly is to delete yarn.lock and node_modules and rerun yarn. Even then I get some annoying warnings, but the app runs fine:

$ yarn
yarn install v1.16.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning react-scripts > [email protected]: Please update: there are crash fixes
warning react-scripts > postcss-preset-env > postcss-color-rebeccapurple > postcss-values-parser > [email protected]: I wrote this module a very long time ago; you should use something else.
warning react-scripts > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: use String.prototype.padStart()
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
warning "react-scripts > @typescript-eslint/parser > @typescript-eslint/[email protected]" has unmet peer dependency "typescript@*".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 23.82s.

[LorelaiG]

I FINALLY resolved the issue. The fsevent error occurred right after I installed bootstrap from my VS code terminal. I ended up using the react-bootstrap-github stylesheet code instead and put it in my index.html!

[toofaniCoder]

Same problem here again

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.