react-scripts no longer prints ESLint warnings #10509

asterikx · 2021-02-05T11:26:11Z

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

Make sure to have "@typescript-eslint/no-unused-vars": "warn" in the eslint config
Add unused variable somewhere in your code, e.g. const x = 42
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.

The text was updated successfully, but these errors were encountered:

miguelCT · 2021-02-05T13:23:16Z

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 · 2021-02-05T17:43:47Z

@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 · 2021-02-05T18:40:05Z

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 · 2021-02-06T18:12:40Z

I no longer receive any eslint warnings in the console.

miguelCT · 2021-02-08T09:19:14Z

...
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 · 2021-02-08T09:38:27Z

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 · 2021-02-08T11:52:18Z

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 · 2021-02-10T11:21:32Z

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 · 2021-02-10T16:15:40Z

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 · 2021-02-10T16:27:50Z

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 · 2021-02-11T08:47:03Z

@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 · 2021-02-11T14:55:49Z

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 · 2021-02-11T15:02:34Z

@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 · 2021-02-11T15:22:32Z

@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 · 2021-02-12T08:13:17Z

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 · 2021-02-12T14:31:22Z

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 · 2021-02-12T15:45:31Z

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

bandrews · 2021-02-16T23:23:03Z

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 · 2021-02-25T06:16:08Z

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 · 2021-02-25T08:24:51Z

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

receter · 2022-01-27T12:55:23Z

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 · 2022-10-03T16:29:21Z

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 · 2022-10-06T12:28:11Z

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

HurYur · 2022-10-07T11:08:47Z

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

doulighan · 2023-10-02T21:11:23Z

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

asterikx added issue: bug report needs triage labels Feb 5, 2021

rus-yurchenko mentioned this issue Feb 5, 2021

After update to 4.0 lint errors are blocking the rendering #9887

Closed

josias-r mentioned this issue Feb 11, 2021

Bug: react-scripts 4 no eslint warnings anymore #10540

Closed

asterikx closed this as completed Feb 25, 2021

amcsi mentioned this issue Feb 25, 2021

Eslint --fix not working on a fresh CRA v4 app #10570

Closed

kitsunekyo mentioned this issue Jan 18, 2022

Warnings not always shown #11809

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-scripts no longer prints ESLint warnings #10509

react-scripts no longer prints ESLint warnings #10509

asterikx commented Feb 5, 2021 •

edited

Loading

miguelCT commented Feb 5, 2021

rus-yurchenko commented Feb 5, 2021

dimadk24 commented Feb 5, 2021

masull commented Feb 6, 2021

miguelCT commented Feb 8, 2021

dimadk24 commented Feb 8, 2021

miguelCT commented Feb 8, 2021

romamd commented Feb 10, 2021

miguelCT commented Feb 10, 2021

DarkAce65 commented Feb 10, 2021

romamd commented Feb 11, 2021

DarkAce65 commented Feb 11, 2021 •

edited

Loading

romamd commented Feb 11, 2021

DarkAce65 commented Feb 11, 2021

teropa commented Feb 12, 2021

DarkAce65 commented Feb 12, 2021

josias-r commented Feb 12, 2021

bandrews commented Feb 16, 2021

DarkAce65 commented Feb 25, 2021

asterikx commented Feb 25, 2021

receter commented Jan 27, 2022

HurYur commented Oct 3, 2022

receter commented Oct 6, 2022

HurYur commented Oct 7, 2022

doulighan commented Oct 2, 2023

react-scripts no longer prints ESLint warnings #10509

react-scripts no longer prints ESLint warnings #10509

Comments

asterikx commented Feb 5, 2021 • edited Loading

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

miguelCT commented Feb 5, 2021

rus-yurchenko commented Feb 5, 2021

dimadk24 commented Feb 5, 2021

masull commented Feb 6, 2021

miguelCT commented Feb 8, 2021

dimadk24 commented Feb 8, 2021

miguelCT commented Feb 8, 2021

Envirnonment info of the Sandbox

romamd commented Feb 10, 2021

miguelCT commented Feb 10, 2021

DarkAce65 commented Feb 10, 2021

romamd commented Feb 11, 2021

DarkAce65 commented Feb 11, 2021 • edited Loading

romamd commented Feb 11, 2021

DarkAce65 commented Feb 11, 2021

teropa commented Feb 12, 2021

DarkAce65 commented Feb 12, 2021

josias-r commented Feb 12, 2021

bandrews commented Feb 16, 2021

DarkAce65 commented Feb 25, 2021

asterikx commented Feb 25, 2021

receter commented Jan 27, 2022

HurYur commented Oct 3, 2022

receter commented Oct 6, 2022

HurYur commented Oct 7, 2022

doulighan commented Oct 2, 2023

asterikx commented Feb 5, 2021 •

edited

Loading

DarkAce65 commented Feb 11, 2021 •

edited

Loading