Question: react-scripts start constantly @ 30% CPU

[remy]

This is a general question (and first time using create-react-app) - I've been using it for about a month, but I notice that when the react-scripts start is running, in an idle state, the CPU is running about 30% for the node process.

Is that normal?

Environment

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

1. npm ls react-scripts (if you haven’t ejected): react-scripts@0.8.5
2. node -v: v7.0.0
3. npm -v: 3.10.8 (but using yarn for installs - v0.15.1)

Then, specify:

1. Operating system: Mac 10.10.3 (14D136)
2. Browser and version: Chrome stable (but doesn't affect CPU usage when tab is closed)

[gaearon]

Do you have node_modules/fsevents? I've heard reports Yarn fails to install it, and without it the watcher has to use an expensive polling mode.

[gaearon]

I would recommend running rm -rf node_modules and then npm install and try again. If it helps then it's that Yarn bug.

[remy]

Huh. That was it. Wow. I had to wait a fair bit for npm to install (switched to yarn some time ago and haven't looked back), but yeah, CPU is totally normal now with an npm based install. Thanks (pretty sure nodemon relies on fsevents somewhere in the stack, so useful to know).

[gaearon]

Can you provide a tiny project that reliably reproduces this issue? I'm not sure we ever filed this problem with Yarn so would be nice to have it.

I tried to create a new project with Yarn, and fsevents seems to be there. So I'm curious what's the accurate way to repro this.

[remy]

Gosh…okay. The project I'm working on has grown (number of files) quite a bit, so I'll have a crack, but can't guarantee anything.

Actually a thought, are the react-scripts watching the entire directory for changes? It might be related to that, and potentially including large node_module dir and some large data files (though, I'm fairly sure the size of the file doesn't affect the watching process…)

[gaearon]

It normally should only watch the dependency graph, but yes, this includes files in node_modules that your app imports (since those can change if you bump the package version).

It may be related to that. If it’s too much effort to trim down, please don’t worry.

[remy]

I'll still give it a go, it's fairly easy to copy then delete stuff out, take a 50/50 approach.

[gaearon]

Thanks, I really appreciate it. I know it’s annoying to spend time on this.

[thien-do]

It quite hard to reproduce the issue.. I also see this, but after a reinstall it works fine again.

However, this might help: I notice that it seems in my previous install, fsevent is failed to run (it said something about the binary). This means the fsevent folder is existed in my node_modules folder, but it still using a lot of CPU, so I think check if fsevent is installed is not enough..

Also, I reinstall with Yarn, so maybe it not because Yarn or NPM, at least in my case. They works both fine this time (run fsevent succesfully)

[thien-do]

Also @gaearon , regarding this:

It normally should only watch the dependency graph, but yes, this includes files in node_modules that your app imports (since those can change if you bump the package version).

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L278
Doesn't this line mean we don't watch files in node_modules?

[gaearon]

I'm not sure to be honest 😛