Create-react-app: eslint for...in / for...of false positive

[shiraze]

Describe the bug

ESlint shows a no-unused-vars false positive with for-in loops.
Looks very similar to https://github.com/eslint/eslint/issues/12117

This issue didn't exist in [email protected]

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

N/A

Environment

Unfortunately, running npx create-react-app --info throws the error shown further down.
I'm using [email protected]

Error from npx command
Environment Info:
(node:612) UnhandledPromiseRejectionWarning: Error: The system cannot find the path specified.

at Function.e.exports.sync (C:\Users\Shiraz.Esat\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:7778)
at Object.copySync (C:\Users\Shiraz.Esat\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:104976)
at Object.t.writeSync.e [as writeSync] (C:\Users\Shiraz.Esat\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:123499)
at C:\Users\Shiraz.Esat\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124274
at Promise.all.then.e (C:\Users\Shiraz.Esat\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124289)
at process._tickCallback (internal/process/next_tick.js:68:7)

(node:612) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:612) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to reproduce

Create a simple function in your CRA project with something like:
``js export function simple() { const iterate = { prop: "value" }; for (const item in iterate) { console.log(item); } } ```` Runnpm start`

Expected behavior

No ESLint warnings should be shown. item is used.

Actual behavior

Compiled with warnings.

./src/utils/file.js
Line 3: 'item' is defined but never used no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[madmed88]

https://github.com/eslint/eslint/issues/12117
downgrading from eslint 6.2.0 to 6.1.0 fixes the issue

[vincerubinetti]

Does anyone know of a temporary work-around for this?

I tried downgrading and locking react-scripts to 3.1.0 and eslint to 6.1.0. It production-builds fine locally (though still throws compile errors, which it shouldn't after downgrading?), but on CI it throws compile errors AND fails to compile.

I've tried turning off no-unused-vars in my .eslintrc file, but it seems like react-scripts doesn't even respect the rules there?

I don't have much experience configuring create-react-app, so any insight or direction would be appreciated.

---

EDIT Nevermind, I was able to solve it by also locking eslint to 6.1.0 in peerDependencies and dependencies. I guess that forced all packages using eslint to be locked to 6.1.0.

[esetnik]

@vincerubinetti for a temporary workaround if you're using yarn you could try the resolutions feature.

[Shannanigans]

I am seeing the same but for a for-of loop. If this is verified think of renaming the issue so that others facing the same problems can more easily find it.

for (const item of items) {
        console.log(item);
}

[jwhitlock]

resolutions didn't work for me, as reported on #7648. react-scripts build looks for an exact version:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-eslint": "10.0.2"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

  /app/frontend/node_modules/babel-eslint (version: 10.0.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.
...

[madmed88]

7594 resolves this issue but it not merged/released yet. As a workaround I published it on npm and use it until a newer react-scripts is released with a fix. https://www.npmjs.com/package/@madmed88/react-scripts

[esetnik]

You can also use SKIP_PREFLIGHT_CHECK=true to avoid the issue mentioned by @jwhitlock. For the proper solution see #7594. Let’s get it merged!

[jwhitlock]

We had just one false positive in our codebase, so a pair of /* eslint-disable no-unused-vars */ / /* eslint-enable no-unused-vars */ comments worked:

https://github.com/mozilla-services/tecken/pull/1864/commits/36a642594fbebc1d8065eadc56f3b3edd3301296

[bdharrington7]

Just curious what the ETA is for publishing the patch?