Eslint-plugin-react: v6.10.1 breaks v6.10.0 builds (related to jsx-indent)

[diegohaz]

Error:

103:11  error  Expected indentation of 8 space characters but found 10  react/jsx-indent

Code from 103:11:
https://github.com/diegohaz/arc/blob/84ef1227b18f3d80ac6a297345ccc007ab191015/src/components/molecules/Modal/index.js#L103

On v6.10.0 it doesn't occur.

[ljharb]

This also is breaking react-dates https://github.com/airbnb/react-dates/issues/383

[yannickcr]

Looking at it.

[ljharb]

@yannickcr i'm afraid this still isn't fixed.

This code is still warning on jsx-indent, newly in 6.10+.

[ljharb]

(there's a number of other examples in that repo; clone at this sha and run npm install && npm run lint to see the errors)

[yannickcr]

Crap, you're right. Seems to be another issue with multi-line tags. I'll made another patch release shortly. but there is a good chance it will be done tomorrow (it's getting late here).

[atkinchris]

We're still experiencing this bug with 6.10.2, with the following JSX.

<div>
    {myText} of {myOtherText} completed before something else
</div>

// Expected indentation of 12 space characters but found 1  react/jsx-indent

[vlcr]

@atkinchris I'm still experiencing problems as well.

My sample:

  <div>
    {var &&
      <span className="text">{var}</span>                                //this line works fine
    }
    {var &&
      <span className="text">{var}
      </span>                                  //this line works fine, even though it shouldn't
    }
    {var &&
      <img                              //line that throws an error, but I believe it shouldn't
        className="picture"
        alt="image"
        src={var}
      />
    }
  </div>

error Expected indentation of 8 space characters but found 10 react/jsx-indent

[freak3dot]

Still seeing the issue with version 6.10.2 also.

Reverting to 6.9.0 works. Reverting for now.

[ljharb]

@yannickcr #1118 has some extra test cases.

[shawnmcknight]

The docs at https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md appear to be indicating that this is the default behavior. Tracing through version history, it looks to me like indentLogicalExpressions was added as an option at 6.10.1 and the default setting of "false" would elicit the behavior reported in this thread. I have changed my eslintrc.json file to contain:
'react/jsx-indent': ['error', 2, {indentLogicalExpressions: true}],'

and the behavior reverts to this not being an error (as expected based on the documentation).

Since making "false" the default behavior appears to introduce a breaking change, perhaps making "true" the default behavior would not?

[yannickcr]

Reverted https://github.com/yannickcr/eslint-plugin-react/issues/1058 since it introduced this issue.
I got caught by the [Fix] label. I thought it was only a bugfix, but it also introduce a new indentLogicalExpressions option and is not backward compatible.

I'll publish the updated version and I'll work on a patch to get this properly fixed.

[yannickcr]

v6.10.3 is now published. @ljharb I tested it on react-dates and it seems fixed.

[ljharb]

Thanks, all fixed!

[jesstelford]

Massive props to @yannickcr for the quick turn around time - thank you so much for the hard work you put into this module 🎉