如何在Create React App中忽略node_modules监听解决ENOSPC错误？

问题描述 #

运行npm start时遇到如下错误：

...
...
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'
...
...

使用公司电脑无法增加文件监听器数量，尝试修改node_modules/react-scripts/config/webpackDevServer.config.js忽略node_modules目录但无效，需解决该问题并实现webpack忽略该目录的正确配置。

有效解决方案（无需修改node_modules文件） #

直接修改node_modules内的配置不仅麻烦，还会因依赖重装失效，推荐两种持久化的配置方式：

方式1：用rescripts覆盖webpack配置 #

1. 安装依赖：

   npm install @rescripts/cli --save-dev
   

2. 在项目根目录创建.rescriptsrc.js文件，写入：

   module.exports = [
     (config) => {
       // 配置devServer的监听忽略规则
       config.devServer.watchOptions = {
         ...config.devServer.watchOptions,
         ignored: ['**/node_modules/**']
       };
       // 同步配置webpack自身的监听忽略
       if (config.watchOptions) {
         config.watchOptions.ignored = ['**/node_modules/**'];
       }
       return config;
     }
   ];
   

3. 修改package.json里的启动脚本：

   "scripts": {
     "start": "rescripts start",
     "build": "rescripts build",
     "test": "rescripts test"
   }
   

4. 重新运行npm start即可。

方式2：用react-app-rewired自定义配置 #

1. 安装依赖：

   npm install react-app-rewired --save-dev
   

2. 在项目根目录创建config-overrides.js文件，写入：

   module.exports = function override(config, env) {
     // 设置devServer监听忽略目录
     config.devServer.watchOptions = {
       ignored: ['**/node_modules/**']
     };
     // 设置webpack全局监听忽略规则
     config.watchOptions = {
       ignored: ['**/node_modules/**']
     };
     return config;
   };
   

3. 修改package.json的脚本：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

4. 重启项目生效。

为什么直接修改node_modules文件无效？ #

大概率是修改的配置项未覆盖到实际生效的监听规则，或是react-scripts启动时会自动重新生成部分配置导致修改被覆盖。另外，直接修改依赖目录文件的方式不持久，下次执行npm install或yarn install后修改内容会被重置。

内容的提问来源于stack exchange，提问作者LDevelop