eslint error no-undef for looping variable

[elquimista]

With regular React JSX syntax, I write like this:

{Object.values(children).map(child => (
  <Tab
    key={child.id}
  >
    <ChildDetails child={child} />
  </Tab>
))}

With pug syntax, I write like this:

each child, i in Object.values(children)
  Tab(
    key=i
  )
    ChildDetails(child=child)

For me, pug syntax looks better in terms of legibility, but I get eslint error no-undef for iterator variable (child).

For now, I should disable eslint temporarily using /* eslint-disable no-undef */ right before return statement in render function.

Can we make it pass eslint without this extra line of disabling eslint rule?

UPDATE: This is intermittent - it happens sometimes and doesn't happen other times.

[ForbesLindesay]

There are several other issues and even some docs about configuring eslint.

[elquimista]

@ForbesLindesay Can you give me more specific information (e.g., link)? I already tried search but could not find - that's why I opened this issue here.

[elquimista]

Perhaps I was not clear enough in my description. I'm getting no-undef eslint error for looping variable (not for pug indicator).

Line 25: 'child' is not defined no-undef
Line 44: 'i' is not defined     no-undef

[ForbesLindesay]

Ah, you shouldn't get that. Are you linting the code before compiling, or after? Are you using eslint-plugin-react-pug? I wonder if it could be a bug in https://github.com/ezhlobo/pug-uses-variables (If so, you could try and narrow it down to a test case and open an issue there)

[elquimista]

Yes, I'm using eslint-plugin-react-pug. Not sure if the linting occurs before/after compilation. I don't use pug-uses-variable (and don't know how to use that).

[elquimista]

Here are my dot files.

.babelrc

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-react-pug"
  ]
}

.eslintrc

{
  "extends": ["airbnb-base", "plugin:react-pug/all", "prettier"],
  "plugins": ["prettier", "react-pug"],
  "env": {
    "browser": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ],
    "class-methods-use-this": "off"
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "modules": ["src"]
          }
        }
      }
    }
  }
}

[ForbesLindesay]

@ezhlobo do you have any suggestions here?

[ezhlobo]

Give me few hours to reproduce that

//CC @artificis @ForbesLindesay

[ezhlobo]

@artificis

This is intermittent - it happens sometimes and doesn't happen other times.

This makes my investigation almost impossible. I was not able to reproduce such behavior, and I have no idea how it can happen :(.

It would be great if you could set up a sample project with the same behavior, so I'll be able to debug.

PS. What do you think about creating a separate issue for this in ezhlobo/eslint-plugin-react-pug, because it's more likely related to prettier and eslint than to this babel-plugin.

[elquimista]

Will do