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