Webpack-开发人员-服务器：编译时出错。已阻止重新加载。(堆栈：反应) [英] Webpack-Dev-Server: Errors while compiling. Reload prevented. (Stack: React)

问题描述

我使用REACT与webpack-开发-服务器进行本地开发。

每隔一段时间我就会收到以下错误： "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"),
  },
};

推荐答案

此问题似乎发生在与emitWarning: false(默认值)一起使用热模块替换的eslint-Loader：

我是这样修复它的(刚刚添加了emitWarning选项并设置为True)：

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

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

这篇关于Webpack-开发人员-服务器：编译时出错。已阻止重新加载。(堆栈：反应)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！