[react/jsx-indent] False positive

[Robloche]

My code was OK until version 7.28.0 but fails with multiple react/jsx-indent errors in versions 7.29.0-3.

Example:

    render(): React.Node {
      const {forwardedRef, isDisabled, key} = this.props;

      return <WrappedComponent
        forwardedRef={forwardedRef}
        isDisabled={isDisabled}
        key={key}
        svgElement={svgElement} />;
    }

Error: ESLint: Expected indentation of 6 space characters but found 8.(react/jsx-indent)

Applying autofix gives me this:

    render(): React.Node {
      const {forwardedRef, isDisabled, key} = this.props;

      return <WrappedComponent
        forwardedRef={forwardedRef}
        isDisabled={isDisabled}
        key={key}
      svgElement={svgElement} />;
    }

which leads to: ESLint: Expected indentation of 8 space characters but found 6.(react/jsx-indent-props)

[ljharb]

How is your eslint configured?

[Robloche]

"react/jsx-indent": ["error", 2],

[ljharb]

Thanks; i reproduced this with failing tests, but wasn’t able to come up with an easy fix. Help is appreciated.

[saraadams]

Have you tried formatting as follows?

      return <WrappedComponent
        forwardedRef={forwardedRef}
        isDisabled={isDisabled}
        key={key}
        svgElement={svgElement} />
      ;

[Robloche]

This gives me a new error: semi-style (semicolon is expected to be at the end of the previous line)