2

When I'm running 'npm start', I'm getting the following error:

... ... Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached, watch '/my_project/node_modules/@babel/runtime/helpers' /my_project/node_modules/react-scripts/scripts/start.js:19 throw err; ^ Error: ENOSPC: System limit for number of file watchers reached, watch '/my_project/src' ... ...

I'm using corporate machines, so I can't increase the limit for the number of watchers.

I read online that I should go to 'node_modules/react-scripts/config/webpackDebServer.config.js' and make sure to ignore the node_modules dir.

I tried playing with it the whole day, but still every attempt to run the react app ends up with the same error message.

Any idea how I can overcome this issue? how to make webpack ignore the node_modules?

Thanks!

Improve this question
2
  • Does this answer your question? Nodemon Error: "System limit for number of file watchers reached" Commented May 22, 2023 at 15:06
  • Hi @jmargolisvt, Unfortunately, not really, because the suggestion over there is to increase the limit of file watchers, however, I don't have root permission. A solution for my problem will need to be ignoring the watching of irrelevant directories. Commented May 23, 2023 at 10:59

2 Answers 2

Reset to default
1

I was looking for the same answer too. And it took me while to figure out the solution.

The Solution is edit to node_modules/react-scripts/config/webpack.config.js

You should find a pattern like this:

const ... ... module.exports = function (webpackEnv){ ... return { target: ... .... } }

The Solution is to add watchOptions in return block.

For Example:

module.exports = function (webpackEnv){ ... return { target: ... .... watchOptions: { ignored: /node_modules/, } } }

Thanks to the author of this stackoverflow answer.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

This is inspired by @AbuSufian answer

I added the code to the end of the file to apply the setting.

const prev_mod_exports = module.exports module.exports = function (webpackEnv) { let exports = prev_mod_exports(webpackEnv); let watchOptions = exports.watchOptions = exports.watchOptions || {}; watchOptions.ignored = watchOptions.ignored || []; watchOptions.ignored.push("/node_modules/"); return exports; }

I'm using devcontainers and hot reloads were extremely slow because the 500K files in node_modules.

I use the below postCreateCommand to patch the file in my devcontainer.json which applies a minified version of the above code if the string prev_mod_exports doesn't exist in the file.

{ "postCreateCommand": "npm install && if [[ $(grep -L prev_mod_exports node_modules/react-scripts/config/webpack.config.js) ]]; then echo 'const prev_mod_exports=module.exports;module.exports=function(webpackEnv){let exports=prev_mod_exports(webpackEnv),watchOptions=exports.watchOptions=exports.watchOptions||{};return watchOptions.ignored=watchOptions.ignored||[],watchOptions.ignored.push(\"/node_modules/\"),exports};' >> node_modules/react-scripts/config/webpack.config.js; fi && cat node_modules/react-scripts/config/webpack.config.js && npm run-script start" }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.