title: System limit for number of file watchers reached
body: <p>I try to run my project on the ubuntu server.
  command:</p>
  <pre><code>npm run production
  </code></pre>
  <p>it calls</p>
  <pre><code>webpack-dev-server --config webpack.prod.js --mode production --inline --progress
  </code></pre>
  <p>After it builds I get a lot of issues:</p>
  <pre><code>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'
  </code></pre>
  <p>Website works, but shows issues:</p>
  <pre><code>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)
  </code></pre>
  <p>On local, I don't see this issue. Not really understand what I should do next</p>
  <p><strong>UPDATED</strong></p>
  <p>webpack config</p>
  <pre><code>/**
   * Webpack Config
   */
   const webpack = require('webpack');
  const path = require(&quot;path&quot;);
  const fs = require(&quot;fs&quot;);
  const FriendlyErrorsWebpackPlugin = require(&quot;friendly-errors-webpack-plugin&quot;);
  // 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 = &quot;/&quot;;
  
  // Make sure any symlinks in the project folder are resolved:
  const appDirectory = fs.realpathSync(process.cwd());
  const resolveApp = relativePath =&gt; path.resolve(appDirectory, relativePath);
  
  // plugins
  // const autoprefixer = require('autoprefixer');
  const HtmlWebPackPlugin = require(&quot;html-webpack-plugin&quot;);
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  const { CleanWebpackPlugin } = require(&quot;clean-webpack-plugin&quot;);
  const UglifyJsPlugin = require(&quot;uglifyjs-webpack-plugin&quot;);
  
  
  module.exports = {
    entry: [&quot;babel-polyfill&quot;, &quot;react-hot-loader/patch&quot;, &quot;./src/index.js&quot;],
    output: {
      // The build folder.
      path: resolveApp(&quot;dist&quot;),
      // 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: &quot;static/js/[name].[hash:8].js&quot;,
      chunkFilename: &quot;static/js/[name].[hash:8].chunk.js&quot;,
      // We inferred the &quot;public path&quot; (such as / or /my-project) from homepage.
      publicPath: publicPath,
      hotUpdateChunkFilename: &quot;hot/hot-update.js&quot;,
      hotUpdateMainFilename: &quot;hot/hot-update.json&quot;
    },
    devServer: {
      contentBase: &quot;./src/index.js&quot;,
      host: &quot;0.0.0.0&quot;,
      compress: true,
      port: 3000, // port number
      historyApiFallback: true,
      quiet: true
    },
    // resolve alias (Absolute paths)
    resolve: {
      alias: {
        Actions: path.resolve(__dirname, &quot;src/actions/&quot;),
        Components: path.resolve(__dirname, &quot;src/components/&quot;),
        Assets: path.resolve(__dirname, &quot;src/assets/&quot;),
        Util: path.resolve(__dirname, &quot;src/util/&quot;),
        Routes: path.resolve(__dirname, &quot;src/routes/&quot;),
        Constants: path.resolve(__dirname, &quot;src/constants/&quot;),
        Helpers: path.resolve(__dirname, &quot;src/helpers/&quot;),
        Api: path.resolve(__dirname, &quot;src/api/&quot;)
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: &quot;html-loader&quot;,
              options: { minimize: true }
            }
          ]
        },
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, &quot;css-loader&quot;]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: &quot;url-loader&quot;,
              options: {
                limit: 10000,
                // name: &quot;static/media/[name]-[hash:8].[ext]&quot;
                name: &quot;[path][name].[ext]&quot;
              }
            }
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg)$/,
          loader: &quot;url-loader?limit=100000&quot;
        },
        // Scss compiler
        {
          test: /\.s[ac]ss$/i,
          use: [
            {
              loader: &quot;style-loader&quot; // inject CSS to page
            },
            {
              loader: &quot;css-loader&quot; // translates CSS into CommonJS modules
            },
            {
              loader: &quot;postcss-loader&quot;, // Run post css actions
              options: {
                plugins: function () {
                  // post css plugins, can be exported to postcss.config.js
                  return [require(&quot;precss&quot;), require(&quot;autoprefixer&quot;)];
                }
              }
            },
            {
              loader: &quot;sass-loader&quot; // 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 === &quot;production&quot; ? &quot;warning&quot; : false
    },
    plugins: [
      
      new FriendlyErrorsWebpackPlugin(),
      new CleanWebpackPlugin({
        dry: false,
        verbose: false
      }),
      new HtmlWebPackPlugin({
        template: &quot;./public/index.html&quot;,
        filename: &quot;./index.html&quot;,
        favicon: &quot;./public/favicon.ico&quot;
      }),
      new MiniCssExtractPlugin({
        filename: &quot;[name].css&quot;,
        chunkFilename: &quot;static/css/[name].[hash:8].css&quot;
      })
      // new BundleAnalyzerPlugin()
    ]
  };
  </code></pre>