Error while configuring react/jsx-props-no-spreading

[Solavon]

While setting up my eslint rules, I ran into some issues when configuring jsx-props-no-spreading

Expected:
Allow props spreading when the following rule is set

'react/jsx-props-no-spreading': ['error', {
      html: "ignore",
      custom: "ignore",
      exceptions: [],
    }],

Actual:
Getting the following error

Error: .eslintrc.js:
Configuration for rule "react/jsx-props-no-spreading" is invalid:
Value {"html":"ignore","custom":"ignore","exceptions":[]} should NOT be valid.

Package versions:

"eslint": "^6.2.0",
"eslint-plugin-react": "^7.14.3",

[ljharb]

This is intentional; there's no point in using the rule if you're ignoring everything and have no exceptions: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-props-no-spreading.js#L48-L63

If you add an exception, or change one of the ignores to "enforce", it should work.

[Solavon]

I understand that it would be pointless, but unfortunately it's part of the airbnb rules that comes with its extension, in any case, after keeping it for a while I can already see its benefit, thank you!

[ljharb]

The airbnb config doesn’t ignore both kinds of components.

[Solavon]

No, as in, this rule came as part of the airbnb config, and I was trying to turn it off.

[ljharb]

Set it to "off" then :-)

[Solavon]

Thanks for teaching me that :P
But I'm going to keep it on for the time being!

after keeping it for a while I can already see its benefit, thank you!

[MichaelPretorius]

How do u switch it to off?

[MichaelPretorius]

No worries got it, thanks

[sadafk831]

Just for the record:
If you wish to use the rule and wish to ignore instead of setting it off. This is how you should use:
In the rule definition, all the fields are made compulsory and specially exceptions is suppose to have an array of string not empty, so the declaration of rules goes like follow

'react/jsx-props-no-spreading': ['error', {
      html: "ignore",
      custom: "ignore",
      exceptions: [""],
    }],

For setting it off you can use either any of the following

'react/jsx-props-no-spreading': ['off']

'react/jsx-props-no-spreading': 0

[AdamAnSubtractM]

This may seem obvious to most people but wasn't to me, this can be set up in an eslintrc.json or eslintrc.js file or in your package.json file by adding a rules object like so:

"rules": { "react/jsx-props-no-spreading": 0 }

[flaviouk]

"rules": {
      "react/jsx-props-no-spreading": [
        "error",
        {
          "explicitSpread": "enforce",
          "html": "ignore",
          "custom": "ignore",
          "exceptions": []
        }
      ]
    }

Configuration for rule "react/jsx-props-no-spreading" is invalid:
	Value {"explicitSpread":"enforce","html":"ignore","custom":"ignore","exceptions":[]} should NOT be valid.

This doesn't work for some reason.. What am I missing? @ljharb

[ljharb]

the rule does not allow an empty exceptions array: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/jsx-props-no-spreading.js#L66

[divmgl]

Back in 2024 and this is not working:

    "react/jsx-props-no-spreading": [
      "error",
      {
        html: "ignore",
        custom: "ignore",
        explicitSpread: "enforce",
      },
    ],

I want to specifically only ban explicitSpread. Is there any way to do this? Unfortunately, I'm getting

Error: .eslintrc.cjs:
        Configuration for rule "react/jsx-props-no-spreading" is invalid:
        Value {"html":"ignore","custom":"ignore","explicitSpread":"enforce"} should NOT be valid.

[ljharb]

@divmgl what version of the plugin are you using?

[divmgl]

7.31.11

[divmgl]

Just updated to latest and it's still occurring unfortunately.

[ljharb]

@divmgl that's pretty ancient :-), but the docs for that version imply it should still be working even without the upgrade (it's still wise to upgrade). Can you file a new issue with a test case that reproduces the problem?

[divmgl]

Sure!

[divmgl]

@ljharb #3799