Webpack-Dev-Server：编译时出错。重新加载被阻止。 （堆栈：反应）

Question

我使用 React 和 Webpack-Dev-Server 进行本地开发。

我时不时会收到此错误： “react_devtools_backend.js:6 [WDS] 编译时出错。重新加载被阻止。”

发生错误后，浏览器上不会更新任何代码更改。

package.json：

 "devDependencies": {
  "@babel/core": "^7.9.6",
  "@babel/plugin-transform-runtime": "^7.9.6",
  "@babel/preset-env": "^7.9.6",
  "@babel/preset-react": "^7.9.4",
  "@material-ui/core": "^4.10.0",
  "babel-loader": "^8.1.0",
  "css-loader": "^3.5.3",
  "file-loader": "^6.0.0",
  "lodash": "^4.17.15",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "style-loader": "^1.2.1",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.11.0"}
"dependencies": {
  "@material-ui/styles": "^4.9.14",
  "clsx": "^1.1.0"}

webpack.config.js：

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
  },
};

Answer 1

此问题似乎发生在 eslint-loader 中，其中热模块替换与

emitWarning: false

（这是默认值）一起使用：

这就是我修复它的方法（只需添加

emitWarning

选项并设置为 true）：

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },

此处的文档：https://github.com/webpack-contrib/eslint-loader#emitwarning-default-false