忽略或防止 ESLint 错误破坏 React webpack 项目中的构建

Question

The problem is that, while I'm developing, every time there's a problem with ESLint, the build breaks and doesn't compile the code.

I set emitWarning: true, but not working. My React project is develop with webpack, neutrino JS, esLint, airbnb.

Errors looks like while running build

ERROR in./src/index.jsx Module build failed (from./node_modules/eslint-loader/dist/cjs.js): Module failed because of a eslint error.

code structure in.neutrinorc.js file

const path = require("path");
const airbnb = require("@neutrinojs/airbnb");
const react = require("@neutrinojs/react");

module.exports = {
  options: {
    root: __dirname,
  },
  use: [
    (neutrino) => {
      neutrino.config.resolve.modules
        .add("node_modules")
        .add(path.resolve(__dirname, "src"));

      neutrino.config.resolve.extensions.add(".jsx");

      neutrino.config.resolve.alias.set("react-dom", "@hot-loader/react-dom");
    },
    airbnb({
      eslint: {
        emitWarning: true,
        baseConfig: {
          settings: {
            "import/resolver": "webpack",
          },
          rules: {
            radix: "off",
            "comma-dangle": "off",
            "react/no-danger": "off",
            "react/button-has-type": "off",
            "react/no-find-dom-node": "off",
            "react/jsx-filename-extension": "off",
            "no-console": [
              "error",
              {
                allow: ["warn", "error"],
              },
            ],
            "no-alert": "off",
            "no-plusplus": "off",
            "no-else-return": "off",
            "no-nested-ternary": "off",
            "no-underscore-dangle": "off",
            "no-restricted-syntax": "off",
            "max-len": 0,
            "quote-props": "off",
            "default-case": "off",
            "class-methods-use-this": "off",
            "import/prefer-default-export": "off",
            "react/no-array-index-key": "off",
            "jsx-a11y/click-events-have-key-events": "off",
            "jsx-a11y/label-has-for": [
              "error",
              {
                required: {
                  some: ["nesting", "id"],
                },
              },
            ],
          },
        },
      },
    }),

Answer 1

You need to add failOnWarning as false

emitWarning: true,
failOnWarning: false,

Answer 2

I had to combine a couple solutions to fix this problem. It's not the most elegant but it works.

Add RUN_ESLINT=true to package.json watch script:

export RUN_ESLINT=true && webpack --config webpack.config.js --watch --mode development

Rewrite module.exports as a function:

module.exports = () => {
...
return {}
}

Use webpack.EnvironmentPlugin to pull in env variables.

new webpack.EnvironmentPlugin(["NODE_ENV", "DEBUG", "RUN_ESLINT"]);

Conditionally add ESLintPlugin:

const plugins = [...];

if (process.env.RUN_ESLINT) {
  plugins.push(new ESLintPlugin());
}
  

That allows me to keep using my npm run build and npm run watch scripts as I had before I added eslint.