System limit for number of file watchers reached

Question

I try to run my project on the ubuntu server. command:

npm run production

it calls

webpack-dev-server --config webpack.prod.js --mode production --inline --progress

After it builds I get a lot of issues:

Error from chokidar (/root/galyan/client/node_modules/@material-ui/icons): Error: ENOSPC: System limit for number of file watchers reached, watch '/root/galyan/client/node_modules/@material-ui/icons/index.d.ts'
Error from chokidar (/root/galyan/client/node_modules/@material-ui/icons): Error: ENOSPC: System limit for number of file watchers reached, watch '/root/galyan/client/node_modules/@material-ui/icons/index.js'
Error from chokidar (/root/galyan/client/node_modules/@material-ui/icons): Error: ENOSPC: System limit for number of file watchers reached, watch '/root/galyan/client/node_modules/@material-ui/icons/package.json'

Website works, but shows issues:

main.5e50702c.js:772 Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at qs (main.5e50702c.js:772)
    at Object.enqueueSetState (main.5e50702c.js:772)
    at t.v.setState (main.5e50702c.js:764)
    at t.componentWillReceiveProps (main.5e50702c.js:750)
    at ya (main.5e50702c.js:772)
    at Bi (main.5e50702c.js:772)
    at gs (main.5e50702c.js:772)
    at cl (main.5e50702c.js:772)
    at sl (main.5e50702c.js:772)
    at $s (main.5e50702c.js:772)
es @ main.5e50702c.js:772
r.callback @ main.5e50702c.js:772
pa @ main.5e50702c.js:772
as @ main.5e50702c.js:772
fl @ main.5e50702c.js:772
t.unstable_runWithPriority @ main.5e50702c.js:780
zo @ main.5e50702c.js:772
pl @ main.5e50702c.js:772
$s @ main.5e50702c.js:772
(anonymous) @ main.5e50702c.js:772
t.unstable_runWithPriority @ main.5e50702c.js:780
zo @ main.5e50702c.js:772
Vo @ main.5e50702c.js:772
Ko @ main.5e50702c.js:772
tl @ main.5e50702c.js:772
Hl @ main.5e50702c.js:772
t.render @ main.5e50702c.js:772
d @ main.5e50702c.js:764
(anonymous) @ main.5e50702c.js:764
(anonymous) @ main.5e50702c.js:764
o @ main.5e50702c.js:1
(anonymous) @ main.5e50702c.js:756
o @ main.5e50702c.js:1
(anonymous) @ main.5e50702c.js:1
(anonymous) @ main.5e50702c.js:1
main.5e50702c.js:772 Uncaught Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at qs (main.5e50702c.js:772)
    at Object.enqueueSetState (main.5e50702c.js:772)
    at t.v.setState (main.5e50702c.js:764)
    at t.componentWillReceiveProps (main.5e50702c.js:750)
    at ya (main.5e50702c.js:772)
    at Bi (main.5e50702c.js:772)
    at gs (main.5e50702c.js:772)
    at cl (main.5e50702c.js:772)
    at sl (main.5e50702c.js:772)
    at $s (main.5e50702c.js:772)

On local, I don't see this issue. Not really understand what I should do next

UPDATED

webpack config

/**
 * Webpack Config
 */
 const webpack = require('webpack');
const path = require("path");
const fs = require("fs");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = "/";

// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// plugins
// const autoprefixer = require('autoprefixer');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");


module.exports = {
  entry: ["babel-polyfill", "react-hot-loader/patch", "./src/index.js"],
  output: {
    // The build folder.
    path: resolveApp("dist"),
    // Generated JS file names (with nested folders).
    // There will be one main bundle, and one file per asynchronous chunk.
    // We don't currently advertise code splitting but Webpack supports it.
    filename: "static/js/[name].[hash:8].js",
    chunkFilename: "static/js/[name].[hash:8].chunk.js",
    // We inferred the "public path" (such as / or /my-project) from homepage.
    publicPath: publicPath,
    hotUpdateChunkFilename: "hot/hot-update.js",
    hotUpdateMainFilename: "hot/hot-update.json"
  },
  devServer: {
    contentBase: "./src/index.js",
    host: "0.0.0.0",
    compress: true,
    port: 3000, // port number
    historyApiFallback: true,
    quiet: true
  },
  // resolve alias (Absolute paths)
  resolve: {
    alias: {
      Actions: path.resolve(__dirname, "src/actions/"),
      Components: path.resolve(__dirname, "src/components/"),
      Assets: path.resolve(__dirname, "src/assets/"),
      Util: path.resolve(__dirname, "src/util/"),
      Routes: path.resolve(__dirname, "src/routes/"),
      Constants: path.resolve(__dirname, "src/constants/"),
      Helpers: path.resolve(__dirname, "src/helpers/"),
      Api: path.resolve(__dirname, "src/api/")
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              // name: "static/media/[name]-[hash:8].[ext]"
              name: "[path][name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      },
      // Scss compiler
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: "style-loader" // inject CSS to page
          },
          {
            loader: "css-loader" // translates CSS into CommonJS modules
          },
          {
            loader: "postcss-loader", // Run post css actions
            options: {
              plugins: function () {
                // post css plugins, can be exported to postcss.config.js
                return [require("precss"), require("autoprefixer")];
              }
            }
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        // Enable file caching
        cache: true,
        // Use multi-process parallel running to improve the build speed
        // Default number of concurrent runs: os.cpus().length - 1
        parallel: true,

        uglifyOptions: {
          compress: false,
          ecma: 8,
          mangle: true
        },
        sourceMap: true
      })
    ]
  },
  performance: {
    hints: process.env.NODE_ENV === "production" ? "warning" : false
  },
  plugins: [
    
    new FriendlyErrorsWebpackPlugin(),
    new CleanWebpackPlugin({
      dry: false,
      verbose: false
    }),
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
      favicon: "./public/favicon.ico"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "static/css/[name].[hash:8].css"
    })
    // new BundleAnalyzerPlugin()
  ]
};

Is your project built with create-react-app? Do you build your project before deploying it? — Shmili Breuer, Jul 28 '20 at 20:54
Not sure if that is related but I had the same issue when deploying my nodejs app to azure, the reason there was that I by accident left the run script to execute 'nodemon index.js` instead of 'node index.js` causing the server to watch for file changes, which makes me think that your issue might be caused by the same reason. (not meaning nodemon but having proccess that watches for file changes to reload the app when a file is changed) — Shmili Breuer, Jul 28 '20 at 22:20

score 35 · Answer 1 · edited Jun 02 '21 at 16:22

35

Increase the file watcher limit:

Ubuntu users (and possibly others), execute: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

(Webpack documentation)

After that, if the error remains, it may be necessary to give a sudo sysctl --system.

edited Jun 02 '21 at 16:22

Community

1
1

answered Jul 28 '20 at 20:53

Pamphile

1,566
12
15

2

You might need to run `sysctl --system` after modifying sysctl configs. – Aidin Aug 31 '20 at 00:32

score 12 · Answer 2 · answered Feb 01 '21 at 17:17

12

I solve this issue this way

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

answered Feb 01 '21 at 17:17

Saif Uddin

167
2
6

Ashish Gupta · Answer 3 · 2021-06-08T08:26:14.650

7

Please execute this comment into ubuntu terminal

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

edited Jun 08 '21 at 08:26

answered Feb 25 '21 at 17:58

Ashish Gupta

1,153
12
14

This looks a quote either from the *webpack documentation* or from [Pamphile's July 2020 answer](https://stackoverflow.com/a/63142592/3789665), not properly attributed either way. – greybeard Jun 27 '23 at 16:59
Additionally, excluding certain files or folders from the file watcher can be an effective way to `optimize its usage and prevent reaching the limit`. watching many files can result in `a lot of CPU or memory usage`. so **increase the number of file watcher if you really needed.** see this answer https://stackoverflow.com/a/76553861/14344959 about exclude certain files or folder from file watcher. OR see this Doc Page https://webpack.js.org/configuration/watch/#watchoptionsignored – Harsh Patel Jun 28 '23 at 04:28

System limit for number of file watchers reached

3 Answers3