[react/jsx-indent] False positive for ternary expressions in plain JS files

[meyfa]

Using eslint-plugin-react at 7.29.0 or 7.29.1 gives false-positives for the react/jsx-indent rule inside ternary expressions that contain absolutely no JSX (are not even in a JSX file). The problem did not exist with version 7.28.0. This is currently failing builds in some of my repositories.

For a complete minimal reproduction, see https://github.com/meyfa/eslint-react-jsx-indent

Consider the following code:

function test (foo) {
  return foo != null
    ? Math.max(0, Math.min(1, 10))
    : 0
}

with the following .eslintrc.yml:

extends:
  - plugin:react/recommended
  - plugin:react/jsx-runtime

rules:
  'react/jsx-indent': [error, 2]

settings:
  react:
    version: detect

gives the error:

2:3  error  Expected indentation of 2 space characters but found 4  react/jsx-indent

I see that #3218 was apparently fixed in the recent patch. I have chosen to report this as a new issue since it appears to be specific to ternary expressions, which differs from issue #3218. At least every failure I could observe in my projects was related to ternary expressions.

[meyfa]

Note that the same problem is reported when the file does contain JSX.

E.g.

function test (foo) {
  return foo != null
    ? <div>foo</div>
    : <div>bar</div>
}

The error appears fixable. The recommended fix is:

function test (foo) {
  return foo != null
    ? <div>foo</div>
  : <div>bar</div>
}

Surely that can't be right.

[ljharb]

The first one was easy to fix; I'm looking at the second one now.

[meyfa]

Thank you so much for taking care of this issue this quickly @ljharb! Very much appreciated :)

[ljharb]

I'll have a patch release out later today.