[7.31.4] no-unknown-property throwing on valid props

[diegohaz]

Related to #3380

I'm seeing the following errors in my project:

Unknown property 'onToggle' found

<details> supports onToggle.

Invalid property 'fill' found on tag 'path', but it is only allowed on: svg

<path> supports fill.

Unknown property 'as' found

<link> supports as.

---

Edit: It looks like there are even more valid use cases that this rule is not covering. I'd suggest reverting the changes to the no-unknown-property rule for v7 and releasing it under a new major version. React Known Props can be used to get all the known props, and users can use the ignore option on the rule to add other props like css.

[diegohaz]

Might be worth checking this: https://github.com/tcodes0/react-known-props

cc @tcodes0

[dermoumi]

Same thing for onPointerDown (and probably other pointer events https://reactjs.org/blog/2018/05/23/react-v-16-4.html)

[peter-resmed]

Also having issue with css property of emotion library

[Primajin]

I am also getting this error on defaultChecked

Unknown property defaultChecked found  react/no-unknown-property

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue or defaultChecked attribute instead of value.

[Meemaw]

Also this should work, but complains that fill is only allowed on svg:

type Props = {
  fill?: string
}

export const Example = ({
  fill,
}: Props) => (
  <svg fill={fill}>
  </svg>
)

[christian98]

I'm having the same problem with fill and <rect/>:

 29:29  error  Invalid property 'fill' found on tag 'rect', but it is only allowed on: svg  react/no-unknown-property

See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect?retiredLocale=de

[ljharb]

@diegohaz Please upgrade to v7.31.4. Are you still seeing these issues?

@Meemaw @christian98 @Primajin @dermoumi a fix for these will be out later today.

@peter-resmed custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

[diegohaz]

@diegohaz Please upgrade to v7.31.4. Are you still seeing these issues?

Yes

[diegohaz]

custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

React does allow custom attributes without data- in certain circumstances. I guess a lot of people would expect the lint rule to work accordingly to that.

[mjchang]

Also getting an issue with the fill attribute on g

[guyellis]

I upgraded to 7.31.4 and I'm still seeing this with playsInline with the video element.

Good news is that 7.31.4 fixed all the other false positives.

[chrisweb]

@ljharb @peter-resmed I opened a ticket in the emotion js repository: emotion-js/emotion#2878

also I confirm @guyellis message about playsInline MDN Video HTML Element attribute playsInline, @sjarva could you please add that one too, to your PR #3385? Thank you for all the fixes you already added to that PR

[AviVahl]

7.31.4
This should pass, but doesn't:
<g fill="#7B82A0" fillRule="evenodd">

"error: Invalid property 'fill' found on tag 'g', but it is only allowed on: svg react/no-unknown-property"

[AviVahl]

It also fails when explicitly passing <div children={...} />, which should work just like <div>{...}</div>

[sibartlett]

I also get Unknown property 'scrolling' found on <iframe>

[ljharb]

I think #3385 now covers everything here except:

• emotion's css property: the only solutions I can think of here are a) emotion users disable this rule, b) hardcode "css" as an allowed property in the rule (ick), or c) allow the rule to be configurable so users can specify their own properties to ignore.
• react apparently allows everything - which is very unfortunate and bizarre - but if we mimicked that, then there's no point in using this rule at all.

If there's anything I missed, please comment here while the issue remains open - or, file a new issue if this one is closed. v7.31.5 will be released shortly after CI passes.

[lyz810]

Unknown property 'onTouchMove' found
Unknown property 'onTouchEnd' found
Unknown property 'onTouchStart' found

As above, I got three errors on div element, which should be supported by react.

[ljharb]

@lyz810 yes, thanks, those are included in #3385.

[Primajin]

First of all a big thank you for the quick turn around ❤️

Regarding emotion css - I guess the cleanest way would be to feed an ignore pattern or list of things to ignore. css per-se is not a valid HTML attribute but total valid react prop in the context of emotion-css. I'm pretty sure other libraries add other funky attributes / props so I'd vote for allowlisting them. 🤞🏻

[teamkuka]

Hello, I am using the latest version of eslint-plugin-react (^7.31.5), and that one is still to correct
Error: Unknown property 'controls' found react/no-unknown-property (in a video player)

Cheers for the rapid fix :)

[tronikelis]

Getting an unknown property "controls" error as well, on a video element

[sjarva]

emotion's css property: the only solutions I can think of here are a) emotion users disable this rule, b) hardcode "css" as an allowed property in the rule (ick), or c) allow the rule to be configurable so users can specify their own properties to ignore.

(Like @diegohaz already said in the modified issue comment) The rule is already configurable with ignore, so the users of emotion should add css as ignored property, when configuring this rule:

...
"react/no-unknown-property": ['error', { ignore: ['css'] }]
...

@ljharb I made a commit that adds this to the rule documentation in #3390

[AMI3GOLtd]

I'm getting the same error in v7.31.9 on iframe with the allowFullScreen attribute:

Invalid property 'allowFullScreen' found on tag 'iframe', but it is only allowed on: video react/no-unknown-property

[ljharb]

@AMI3GOLtd yes, that's fixed by #3455 in v7.31.10. Please file new issues in the future for these things.