react-scripts no longer prints ESLint warnings

[asterikx]

Describe the bug

After upgrading to react-scripts@4.0.2, react-scripts start no longer prints ESLint warnings (both to the terminal and browser console), while it still prints ESLint errors.

Did you try recovering your dependencies?

1.22.10

Which terms did you search for in User Guide?

None.

Environment

Environment Info:

  current version of create-react-app: 4.0.1
  running from /Users/erikmuller/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 11.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Edge: Not Found
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Make sure to have "@typescript-eslint/no-unused-vars": "warn" in the eslint config
2. Add unused variable somewhere in your code, e.g. const x = 42
3. Run yarn react-scripts start

Expected behavior

React Scripts prints both ESLint errors and warnings.

Actual behavior

React Scripts only prints ESLint errors but no warnings.

[miguelCT]

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?

[rus-yurchenko]

@miguelCT I faced the same issue today. I set ESLINT_NO_DEV_ERRORS=true, get the warning in the console, but I see the failed build as the app overlay.

Can this behavior be due to an extended Eslint config?

[dimadk24]

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

[masull]

I no longer receive any eslint warnings in the console.

[miguelCT]

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

@DimaDK02 are you sure you are using v4.0.2 of CRA? I see in your Environment info about v3.4.1, but I'm not sure if that info is related to your system.

Just to add more information, in my case the Environment info is:

  current version of create-react-app: 4.0.2
  running from /home/miguel/.npm/_npx/40557/lib/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 14.15.4 - ~/n/bin/node
    Yarn: Not Found
    npm: 6.14.10 - ~/n/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.2 => 4.0.2 
  npmGlobalPackages:
    create-react-app: Not Found

[dimadk24]

DimaDK02 are you sure you are using v4.0.2 of CRA? I see in your Environment info about v3.4.1, but I'm not sure if that info is related to your system.

@miguelCT, it's just a version of globally installed create-react-app. Locally, in the node_modules I have react-scripts@4.0.2.
Just to double-check I had removed the globally installed create-react-app (cause it's used only to bootstrap the project), tried steps again, and everything worked as expected.

BTW, in the env info of @asterikx I see current version of create-react-app: 4.0.1 and no info about the version of react-scripts

[miguelCT]

I've created a CodeSandbox Container with the same instance of CRA that I have locally and the result is the same.

Envirnonment info of the Sandbox

current version of create-react-app: 4.0.2
running from /home/sandbox/.npm/_npx/2980/lib/node_modules/create-react-app

System:
OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Binaries:
Node: 10.23.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.2 => 4.0.2
npmGlobalPackages:
create-react-app: Not Found

Link: https://codesandbox.io/s/cra-402-eslint-errors-bfwgl?file=/.eslintrc.json:43-92

Important: ignore the VsCode hints/warnings for TS in that container files. Right now, VsCode in these containers only accepts Typescript 4.1.2, but the environment and project configuration is correct (with TS 4.1.3)

As you can see in the console and the running app (overlay) there's and error due to an used variable. This error has been converted by CRA to a warn thanks to the ESLINT_NO_DEV_ERRORS=true line, but on the contrary as expected, the compilation still fails due to this warning.

[romamd]

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.

[miguelCT]

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.

Thanks for the possible solution @romamd. Downgrading works as expected.

I still think that this is an issue with CRA in the current 4.0.2 version, because it should work out of the box without me having to downgrade some dependencies. There is this temporal solution, yeah, but as @DarkAce65 was also pointing out here, something is still not working as expected with the current CRA internal configuration.

[DarkAce65]

Yeah, I think that PR unintentionally disabled warnings when you don't use the ESLINT_NO_DEV_ERRORS env variable. I dug around esliht-webpack-plugin a bit and I don't believe the issue originated in v2.5.0 (that release has a bug fix that you probably want to have).

FWIW my solution was to just pin react-scripts at v4.0.1 for now.

npm i react-scripts@4.0.1 --save-dev

[romamd]

@DarkAce65 Don't think downgrading react-scripts to 4.0.1 can help with that issue, ESLINT_NO_DEV_ERRORS was introduced in 4.0.2 release

[DarkAce65]

Ah to be clear, these warnings are not showing up when ESLINT_NO_DEV_ERRORS is not true. My understanding was the eslint-webpack-plugin doesn't emit warnings if emitWarning is false (which, in react-scripts@4.0.2, is what happens when ESLINT_NO_DEV_ERRORS is not true). I believe I had eslint-webpack-plugin@2.5.0 when I was testing.

@romamd the PR that @miguelCT linked was introduced in v4.0.2 so I just downgraded to have warnings show up (I personally want to see errors and warnings at whatever level I've configured them to be).

[romamd]

@DarkAce65 The problem is that ESLINT_NO_DEV_ERRORS doesn't work as expected (build is failing on errors, instead of replacing errors with warnings) if your version of esliht-webpack-plugin is 2.5.0

[DarkAce65]

@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!

[teropa]

I was also getting no eslint warnings at all after upgrading react-scripts 4.0.1 to 4.0.2.
I added the ESLINT_NO_DEV_ERRORS=true as mentioned here, but also had to remove and regenerate my lockfile to get everything to line up again. There's some incompatibility in version dependency ranges somewhere, I guess.

[DarkAce65]

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

[josias-r]

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

[bandrews]

I also am seeing this with a project that was freshly upgraded to CRA 4.0.2 from 3.x today.

Running npm i eslint-webpack-plugin@2.4.3 --save-dev -E worked to restore warnings as expected.

[DarkAce65]

Hey all, just a heads up, it looks like this issue was fixed in #10590 and released in react-scripts@4.0.3 a couple days ago - I confirmed locally and things seem to be working for me without needing to downgrade eslint-webpack-plugin anymore 🎉

[asterikx]

I can confirm too, that the issue does no longer exist in react-scripts@4.0.3.

[receter]

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.

[HurYur]

I was using react-scripts@4.0.3. for a while in our App, due to the described issue above
But some of its dependencies have vulnerabilities, so updated to the new version(5.0.1). And faced with the warning missing issue again.

Unfortunately receter's comment doesn't help.

Any updates about the fixes? thanks

[receter]

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

[HurYur]

@receter yeah, it helped with the initial warnings representation in the terminal, but still doesn't represent any warnings in the Browser console..

[doulighan]

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