create-react-app: react-scripts no longer prints ESLint warnings

I’m not sure if what happens to me is the same but, even though I have the ESLINT_NO_DEV_ERRORS (v4.0.2) env variable set to true, and the ESlint errors are transformed to ESlint warnings, the build is still not successful and I get a Failed to compile. message.

For example, with this code:

const x = 42; 

And the rule:

"@typescript-eslint/no-unused-vars": "error"

I get the following console output:

And the following error in the App Overlay

What I understood about the ESLINT_NO_DEV_ERRORS env is that, even if I have ESlint errors in my code, those errors would be transformed to warnings and therefore the App compilation would be successful, printing those in console. Have I maybe misunderstood or is it possibly a bug?

@HurYur Did you try to remove the .cache folder once? rm -R ./node_modules/.cache

This seems to be related to this release: https://github.com/webpack-contrib/eslint-webpack-plugin/releases/tag/v2.5.0

@miguelCT Running npm i eslint-webpack-plugin@2.4.3 --save-dev -E fixed it for me.

I no longer receive any eslint warnings in the console.

@HurYur Having the same problem on 5.0.1. Did you end up with a fix?

I did not see any warnings in my project because my package.json was missing eslintConfig:

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

Probably I missed something in the relase notes and forgot to add this at some point.

It’s reproducible with a fresh install as well: npx create-react-app my-app --template typescript should suffice

Yeah, I did some more testing and made a reproducible example repo (https://github.com/DarkAce65/cra-eslint-warnings) and brought it up in #10170. TLDR is that the combination of react-scripts@4.0.2 and eslint-webpack-plugin@2.5.0 is causing the issue

@romamd oh weird, I can run some more tests later today on those two versions but I was correctly seeing errors being converted to warnings with react-scripts@4.0.2, eslint-webpack-plugin@2.5.0, and ESLINT_NO_DEV_ERRORS=true.

Since I wasn’t planning on using ESLINT_NO_DEV_ERRORS anyway, I just downgraded to react-scripts@4.0.1 and eslint-webpack-plugin@2.5.0 to fix my issue. Sorry if that was confusing!

For me it works as expected on react-scripts@v4.0.2: I have ESLINT_NO_DEV_ERRORS=true in my .env file in the project root. I added "@typescript-eslint/no-unused-vars": "warn" to the rules section of eslintrc, added an unused variable to 1 of the files (as @asterikx suggested) and it successfully compiled, printed warning about unused variable in the console and there was no error overlay in the app

And same with steps provided by @miguelCT: I get a warning in the console and no error overlay in the app

Env info:

Environment Info:

  current version of create-react-app: 3.4.1
  running from /home/dima/.config/yarn/global/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 10.23.1 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.10 - /usr/bin/npm
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.2
  npmPackages:
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-scripts: ^4.0.2 => 4.0.2 
  npmGlobalPackages:
    create-react-app: Not Found