Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)

Question

I've recently created a project with create-react-project.

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.

Can I keep the build running while still having ESLint running and reporting errors that I will fix later?

score 59 · Accepted Answer · answered Jan 31 '18 at 23:29

If you want to force ESLint to always emit warnings (that will not stop you build) instead of errors, you need to set emitWarning: true:

{
    enforce: 'pre',
    include: paths.appSrc,
    test: /\.(js|jsx|mjs)$/,
    use: [{
        loader: require.resolve('eslint-loader'),
        options: {
            formatter: eslintFormatter,
            eslintPath: require.resolve('eslint'),
            emitWarning: true,  HERE
        },
    }],
},

As stated in the docs:

Errors and Warning

By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:

emitError (default: false)

Loader will always return errors if this option is set to true.

emitWarning (default: false)

Loader will always return warnings if option is set to true. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error.

...

[`webpack.config.js`](https://webpack.js.org/configuration/) — Danziger, Mar 04 '21 at 09:40

score 21 · Answer 2 · answered Jul 27 '21 at 09:24

21

just add DISABLE_ESLINT_PLUGIN=true in your .envfile

cheers !

answered Jul 27 '21 at 09:24

janadari ekanayaka

3,742
2
13
17

1

or `DISABLE_ESLINT_PLUGIN=true npm run build` – VityaSchel Oct 14 '21 at 05:46
2

```'DISABLE_ESLINT_PLUGIN' is not recognized as an internal or external command``` I got this, any idea ? – Karma Blackshaw Oct 19 '21 at 14:12
@KarmaBlackshaw `npm config set script-shell "C:\path\to\bash.exe"` to tell npm to use bash instead of cmd. – Annan Yearian Jul 11 '22 at 09:06

Ali Aljarah · Answer 3 · 2020-10-25T14:28:25.920

since eslint-loader is now deprecated and eslint-webpack-plugin is now used in create-react-app check the docs, I was able to solve a similar issue by adding two option to the eslint-webpack-plugin

after ejecting your react app, add these options to the ESLintPlugin options:

      new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false,  <== `This one`
        emitWarning: true,  <== `And this one`
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

I tried some solutions but it didn't solve the problem. one of them is to hide the warning inside the code and instead the app will only show it in the terminal, but that didn't suite me since I want the errors and warnings to appear in the code. — Ali Aljarah, Jan 26 '21 at 16:53

score 3 · Answer 4 · answered Nov 03 '21 at 09:31

3

I might be late for the answer but if you add ESLINT_NO_DEV_ERRORS=true in the .env file then the error is sorted.

P.S: it works with react script 4.0.3 and above

answered Nov 03 '21 at 09:31

Vikas Bansal

10,662
14
58
100

Hariom Balhara · Answer 5 · 2021-09-04T12:43:39.457

2

For people wanting to solve this problem in 2021, you can simply set following in your .env.development file to ignore TypeScript Errors

TSC_COMPILE_ON_ERROR=true

Source: https://create-react-app.dev/docs/advanced-configuration/#:~:text=TSC_COMPILE_ON_ERROR

Also, to ignore ESLint errors, use craco to override eslint-webpack-plugin default configuration to ignore errors in development environment.

const eslintWebpackPlugin = require("eslint-webpack-plugin");
const process = require("process");
module.exports = {
  webpack: {
    configure: (config) => {
      config.plugins.forEach((plugin) => {
        if (plugin instanceof eslintWebpackPlugin) {
          // Ignore ESLint Errors.
          plugin.options.failOnError = process.env.NODE_ENV === "production";
        }
      });
      return config;
    },
  },
};

edited Sep 04 '21 at 12:43

answered Sep 04 '21 at 12:25

Hariom Balhara

832
8
19

This is really a bad solution because why we use TypeScript is to throw errors at compile stage! – Tamer Durgun Aug 09 '22 at 08:37
Which is why the solution suggests to do it when you are not in production mode – Hariom Balhara Aug 10 '22 at 12:37
You should have compile errors at the dev stage to prevent wrong code moves on to the production stage. Don't you commit changes after development? – Tamer Durgun Aug 12 '22 at 04:28
1

When you are developing things, you may want instant feedback and not stuck on solving TS errors(when you already know that the code isn't ready to be commited or pushed or ready for review). Frankly this is a preference of the developer – Hariom Balhara Aug 12 '22 at 05:00

score -1 · Answer 6 · answered Jan 14 '18 at 12:45

Ok I just commented this lines from my webpack config

  // {
  //   test: /\.(js|jsx|mjs)$/,
  //   enforce: 'pre',
  //   use: [
  //     {
  //       options: {
  //         formatter: eslintFormatter,
  //         eslintPath: require.resolve('eslint'),
  //
  //       },
  //       loader: require.resolve('eslint-loader'),
  //     },
  //   ],
  //   include: paths.appSrc,
  // },

Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)

6 Answers6

Linked