Webpack-Dev-Server: Errors while compiling. Reload prevented. (Stack: React)

问题

I use React with Webpack-Dev-Server for local Development.

Every now and then I get this error: "react_devtools_backend.js:6 [WDS] Errors while compiling. Reload prevented."

After the error occurs, no code-change is being updated on the browser.

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"),
  },
};

来源：https://stackoverflow.com/questions/61998009/webpack-dev-server-errors-while-compiling-reload-prevented-stack-react