Configuration for rule "react/jsx-indent" is invalid: Value "4,[object Object]" should NOT have more than 1 items

Question

I've arrived at work today to an unusual error coming from my linter package. I've had a look at the documentation for the package and I can't see any issues with my eslintrc file.

Here is a copy of what I'm using

{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
    "import/no-extraneous-dependencies": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "eol-last": "off",
    "no-unused-expressions": ["error",{
        "allowTernary": true,
        "allowShortCircuit": true
        }],
    "react/jsx-indent-props": "off",
    "react/jsx-indent" : ["error", 4, { "props": 4 }],
    "indent": [ "error", 4],
    "react/jsx-filename-extension": "off",
    "jsx-a11y/anchor-is-valid": [
        "error",
        {
            "components": [],
            "specialLink": [
                "hrefLeft",
                "hrefRight"
            ],
            "aspects": [
                "noHref",
                "invalidHref",
                "preferButton"
            ]
        }
    ],
    "no-bitwise": "off"
},
"env": {
    "browser": true,
    "jest": true
}

}

I'm not having any problems when I run eslint from the command line which makes this even more confusing!

Any help would be greatly appreciated :)

Answer 1

Just incase anyone runs into this problem in the future, I spotted the issue.

"react/jsx-indent" : ["error", 4, { "props": 4 }],

should be

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

I think someone was trying to get fancy with destructuring :P

Answer 2

As Fabio already figured out, props was added incorrectly. For anyone wanting to add props, you can see this disabled in the line above "react/jsx-indent".

So you could just change this line "react/jsx-indent-props" and clean up the following line with:

"react/jsx-indent" : ["error", 4]
"react/jsx-indent-props": ["error", 4]

A further note: If you are experiencing an error with props indentation on ternary items, then instead of setting a number, you can use "first" to align with the tags first prop.

"react/jsx-indent-props": ["error", "first"]

This should avoid errors when your JSX looks something like this:

return (
    {showComponent
        ? <MyComponent
            option="1"
            onClick={myCompHandler}/>
        : <p>Something Else</p>
    }
)

For more information: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md