Why am I getting a 'no-unused-vars' warning in a for...of loop and how do I fix it?

Question

I'm working on a React app created with Create React App. In every for...of loop, I get this weird 'no-unused-vars' warning pointing to the variable I have instantiated in the for statement.

ESLint tells me my variable is not used, but it is actually used.

Does anybody else get a similar warning? Is it an ESLint bug or am I doing something wrong here?
This is not a big issue, but it is annoying.
Thanks for your help.

   for (let track of tracks) {
        let chords = RavelFormatter.splitEntries(track.pitches)
        for (let chord of chords) {
            var n = chord.split(':')
            total += n.length
        }
    }

Console output

  Line 13:  'track' is defined but never used       no-unused-vars
  Line 15:  'chord' is defined but never used       no-unused-vars

Answer 1

See issue 12117 , which is related to a specific version of ESLint. You can revert your ESLint version back to v6.1.0 to resolve this.

Answer 2

Please upgrade the babel-eslint package to version 10.0.3 .

This will most likely fix those false-positives where vars are used inside loops and wrongly reported as unused.

Answer 3

Upgrade to eslint 6.8.0 and babel-eslint 10.1.0.

This is a known issue with babel-eslint and is related to the eslint-scope version used. It looks like it started in eslint 6.1.0.

Just upgrade your packages to (at least):

"babel-eslint": 10.1.0,
"eslint": 6.8.0

You can view the Github Issues here:

• https://github.com/eslint/eslint/issues/12117
• https://github.com/babel/babel-eslint/issues/791

Answer 4

I was able to fix it by using this.

let track = null;

for (track of tracks) {
    let chords = RavelFormatter.splitEntries(track.pitches)
    for (let chord of chords) {
        var n = chord.split(':')
        total += n.length
    }
}