Linting JSX const without brackets / parenthesis causes eslint to hang

[mattdell]

What version of TypeScript are you using?
2.2.1

What version of typescript-eslint-parser are you using?
2.1.0

What code were you trying to parse?

const menuItems = <div className={theme['header__menu-items']}>
        <Icon handleClick={handleIconClick} type={IconTypes.Chat} />
        <Icon handleClick={handleIconClick} type={IconTypes.Menu} />
    </div>;

What did you expect to happen?
eslint to run successfully

What happened?
eslint hangs and becomes unresponsive. I've left it to run over lunch and it was still stuck.

Changing the syntax to be contained within brackets / parenthesis fixes the issue.

const menuItems = (
    <div className={theme['header__menu-items']}>
        <Icon handleClick={handleIconClick} type={IconTypes.Chat} />
        <Icon handleClick={handleIconClick} type={IconTypes.Menu} />
    </div>
);

I've now been able to reproduce this several times.

[soda0289]

I was unable to reproduce the problem with the code sample.

Can you post your .eslintrc file maybe there is some rule causing the problem. Are you using eslint-plugin-react? I noticed a problem when enabling the jsx-indent rule from that plugin that would cause an infinite loop.

[mattdell]

I'll get the eslintrc for you tomorrow.

We are running eslint-react as a result of using eslint-airbnb-config. I wonder if it's the react/jsx-wrap-multilines rule as that's directly related to this example.

I'm also running on a PC with very limited resources, which seems to exacerbate any inefficiencies.

[mattdell]

Sorry for the delay. My .eslintrc file is...

module.exports = {
  "parser": "typescript-eslint-parser",
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    "extra-rules",
    "chai-friendly",
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
  },
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
  },
  "globals": {
    "__DEV__": false,
    "__TEST__": false,
    "__PROD__": false,
    "__COVERAGE__": false,
    "require": false,
    "sinon": false,
    "expect": false
  },
  "rules": {
    // Blame Windows
    "linebreak-style": ["error", process.env.NODE_ENV === 'production' ? "unix" : "windows"],

    // Blame TypeScript
    "import/no-unresolved": 0,
    "import/extensions": 0,
    "no-undef": 0,
    "quotes": ["error", "single"],
    "react/prop-types": 0,
    "react/no-unescaped-entities": 0,

    // Needs linter update
    "no-unused-vars": 1,
    "space-infix-ops": 1,

    // Blame chai
    "no-unused-expressions": 0,
    "chai-friendly/no-unused-expressions": 2,

    // Exceptions to Airbnb
    "comma-dangle": ["error", "always-multiline"],
    "dot-notation": 0,
    "import/first": 0,
    "import/no-extraneous-dependencies": 0,
    "max-len": 0,
    "no-underscore-dangle": 0,
    "no-param-reassign": 0,
    "react/no-array-index-key": 0,
    "react/jsx-indent": ["error", 4],
    "react/jsx-indent-props": ["error", 4],

    // General Rules
    "indent": ["error", 4],
    "react/jsx-filename-extension": [2, { "extensions": [".tsx", ".spec.js"] } ],
  }
}

[soda0289]

Thanks for posting the config.

Can you try to disable react/jsx-indent and react/jsx-indent-props. Does that fix the issue?

[mattdell]

That does fix the issue. I updated those values to

"react/jsx-indent": 0,
"react/jsx-indent-props": 0,

And I now see the linter execute correctly.

[soda0289]

I will try and take look at why this happens on the weekend. We are also working on implementing JSX indentation support to eslint v4 and I don't think I have seen this problem yet using that rule.

[soda0289]

Sorry I took so long to look into this. Just got caught up with other issues.

We were not using the correct range or line/column numbers in the JSXText tokens. This is what was causing the infinite loops and possibly other failures with the eslint-plugin-react. Posting a PR shortly.