Create-react-app: High CPU usage while running on OS X

[dceddia]

After running npm start, the node process consumes ~40% CPU on my machine:

I found that setting a polling interval in the the WebpackDevServer helped:

new WebpackDevServer(compiler, {
    historyApiFallback: true,
    hot: true, // Note: only CSS is currently hot reloaded
    publicPath: config.output.publicPath,
    quiet: true,

    // added this:
    watchOptions: {
      poll: 1000
    }
  })

Here were the settings I tried, and the resulting CPU usage:

poll: 1000  =>  4-6% CPU
poll: 500   =>  8-10% CPU
poll: 250   =>  14-16% CPU

There's a tradeoff between CPU usage and how snappy the dev experience feels. To me, 1000ms felt sluggish, but 500ms felt pretty good. I couldn't discern much difference between 500ms and 250ms.

It seems like adding some kind of polling interval would be a good idea to reduce the CPU usage.

[gaearon]

I wonder if we should just do something like this: https://github.com/researchgate/webpack-watchman-plugin

[gaearon]

Does webpack always use poll mode? Or only when it couldn’t use fsevents? Or are these two unrelated things?

[dceddia]

That's a good question. As far as I can tell poll defaults to true, which apparently means "poll like crazy". It also seems to watch everything in node_modules by default -- adding this ignore line cuts CPU usage to near-zero, even while leaving poll at its default setting:

watchOptions: {
  ignore: /node_modules/
}

I'm not sure if this is a good idea, since I noticed that webpack.config.dev.js has a few loaders that seem to depend on paths.appNodeModules, which I assume is the node_modules directory?

As another data point, my wife also has a Mac and hers doesn't exhibit the high CPU usage while running npm. Different version of OS X (10.9 instead of 10.10) but I'm not sure what else is different.

Update: I'm also sad to report that node has stopped showing high CPU usage on my machine now, too. Sad because... what changed?

[gaearon]

Hmm we definitely don't want to watch node_modules (even though we allow importing CSS from them). If we do, it's an issue and we need to fix it.

[gaearon]

I'll accept a PR adding ignored (not ignore by the way) to watcher settings. https://github.com/webpack/watchpack/pull/23

[gaearon]

This was fixed by #294.

[gaearon]

This should be fixed in the new version. Can you please verify?
Please find the upgrade instructions here.

[dceddia]

Just tried it: node CPU usage now hovers between 0.1 and 0.2% 👍

[shauntrennery]

Seems to be a problem again with Node 7.0.0 and 7.1.0. macOS Sierra reporting CPU usage of 110% during "npm start" operation.

[ggregoire]

Can confirm here.

I updated from node 6.8.1 to node 7.1.0 yesterday and now the node process consumes 100% CPU on my machine.

I didn't find anything relative to CPU usage and node 7 in Webpack issues.

I'm on El Capitan + latest version of CRA.

@gaearon @dceddia Should we reopen the issue or create a new one?

Edit: For those who have the same problem, you can downgrade with brew switch node x.x.x and list all the versions installed with brew info node.

[gaearon]

Let's reopen. Have you reported this to webpack? Can you confirm you have fsevents in node_modules?

[shauntrennery]

@gaearon I can confirm that I have fsevents in node_modules.

[dceddia]

I'm seeing this too -- with node v7.1.0 on macOS Sierra, but not with node 6.9.1.

I tried putting back the poll option from back at the beginning of this issue, but it doesn't help quite as much as before...

no poll => 70-80% CPU
no poll, no ignored => 70-80% CPU
poll: 1000  => 10% CPU
poll: 500   =>  20% CPU
poll: 250   =>  36% CPU

It's almost as if the "ignored" line isn't working anymore. If I comment out that option, the CPU usage is not affected.

[gaearon]

Worth filing a https://github.com/webpack/watchpack issue?

[dceddia]

So, in a weird turn of events, I can no longer reproduce this. Using nvm w/ Node 7.1.0 and NPM 3.10.9, I installed create-react-app 0.6.0 and then did a create-react-app test. It installed fsevents correctly, and when I npm start, the CPU usage is fine.

However, about an hour ago, I was noticing that a fresh npm install would say something about "fsevents couldn't find binary, building..." -- but now, it downloads the binary for darwin-v51 just fine. Perhaps they just pushed it up...

Can anyone else confirm? Create a new project from scratch and see if the issue persists?

[jlubeck]

I'm running into this issue and I don't see fsevents in my node_modules.

create-react-app 0.6.0
npm 4.0.2
node 7.2.0
macOS Sierra 10.12.2

CPU goes up to 140%, don't even know how that is possible!

[gaearon]

Can you paste the full npm log after creating a fresh project?

[jlubeck]

mmmm creating a fresh project and copying over the src files seems to have fixed the issue... I wonder why!

[jlubeck]

I do see fsevents now as well... on the package.json, the only difference I see between old and new is react went from 15.4.0 to 15.4.1, in case it helps

[seidtgeist]

It seems that I have fixed the problem locally:

I removed my node_modules and yarn.lock, updated to [email protected] and now there is no CPU usage after the initial compilation.

I’m on node 0.7.2 with [email protected].

[gaearon]

Have you readded yarn.lock back now?

[seidtgeist]

@gaearon Yes, I have re-added the yarn.lock created by a fresh install of my dependencies.

[gaearon]

Closing then.
If you're having issues, try:

1. Removing node_modules
2. Updating react-scripts to the latest version in package.json (make sure you follow the migration instructions in changelog for every release you're skipping)
3. Updating npm (npm i -g npm@latest) or Yarn (yarn self-update)
4. Running npm install (or yarn)

[yuzhakovvv]

We had a deprecated version of fsevents in yarn.lock.

1. rm -rf node_modules/
2. Delete yarn.lock
3. yarn (creates yarn.lock with the latest version of fsevents)

[ravilution]

I am sorry guys. Because of this issue, I am seriously thinking of setting up my own workspace. This is not helping development speed in any way.

[wiesson]

@ravilution which version of Node do you use?

[ravilution]

@wiesson 10.5.0. By the way, I have setup React + Parcel with all the features from CRA. It is blazing fast. I love it.

[savants]

https://til.codes/fix-for-100-cpu-usage-by-nodejs/

Worked for me

[nedislavd]

I'm having the same issue in the last few days,
Running node v10.5.0 and npm 6.1.0 on Win10 x64

I've already tried:

• removing /node_modules and doing a yarn install
• adding a poll inside the watchOptions but neither worked.

Any ideas how to resolve this issue?

[coopersamuel]

@nedislavd If you recently upgraded to Node 10, you may need to npm install fsevents or npm rebuild fsevents. Worked for me on Mac High Sierra, not sure if that's a fix for Windows though

[travisdetert]

Can confirm @savants link also fixed this for me on Mojave.