已达到文件观察者数量的系统限制

Question

我尝试在 ubuntu 服务器上运行我的项目。 命令：

npm run production

它调用

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

构建后我遇到了很多问题：

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'

网站正常，但显示问题：

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)

在本地，我没有看到这个问题。不太明白我接下来应该做什么

更新

webpack 配置

/**
 * 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()
  ]
};

Answer 1

增加文件观察者限制：

Ubuntu 用户（可能还有其他用户），执行：echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

(Webpack documentation)

之后，如果错误仍然存​​在，可能需要提供sudo sysctl --system。

Answer 2

我是这样解决这个问题的

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

Answer 3

请在 ubuntu 终端中执行此注释

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