eslint-plugin-react rule react/no-unknown-property false negatives on all props for threejs tags

[JustFly1984]

After updating eslint-plugin-react to the latest version, it complains on unknown properties. Just wanted to mention it here.

I've created an issue here:

jsx-eslint/eslint-plugin-react#3423

[KarthikS373]

Same issue here

Even though there exist a property position?: Vector3 | undefined I am getting an error Unknown property 'position' found eslint[react/no-unknown-property]

[jynxio]

I have seen your response both on Stack Overflow and here, but your solution appears to be incorrect for the following reasons:

• @react-three/eslint-plugin itself doesn't solve the no-unknown-property issue, it only provides two additional rules;
• The usage of plugin:@react-three seems to be incorrect, and it causes ESLint to malfunction, which is why the no-unknown-property warning disappears;

[Petsamuel]

Hey @jynxio thanks for your feedback, it was stated in my posts/replies that I followed the instructions on https://socket.dev/npm/package/@react-three/eslint-plugin and it worked for me.

the @react-three/eslint-plugin is an ESLint plugin specifically designed for React Three Fiber (R3F) projects providing custom rules and configurations tailored to the R3F ecosystem, helping developers catch common mistakes and enforce consistent coding practices.

I mean if this resolves the issue of no-unknown-property for me don't you think it's FIX?

Anyway, I will take down my replies/posts right away!
Thanks for your feedback.

[jynxio]

You need to reread and truly understand my response. Good luck to you.

[ckc0702]

@jynxio please elaborate in how is the plugin causing the ESlint to malfunction.

[jynxio]

@ckc0702 👋

@Petsamuel's solution was to add a plugin:@react-three extends to ESLint, so how did I discover that this solution would cause the entire ESLint to malfunction?
I randomly wrote some obviously violating ESLint rules, but ESLint didn't throw any warnings until I deleted his solution, and then ESLint started to issue the warnings it should have before.

Why did @Petsamuel's solution paralyze ESLint? Because the @react-three/eslint-plugin didn't actually release an extends named plugin:@react-three ...

I took a look at the source code of @react-three/eslint-plugin (which is quite limited), and it only added two new rules, but didn't do anything about the no-unknown-property rule, so I think this plugin is actually not suitable for the requirement raised in this post. I'm now relying on it to suppress ESLint warnings:

"react/no-unknown-property": "off"

And then rely on TSC's check to avoid dirty code.

[igor-q-bio]

This is still happening

[cyrilchapon]

Confirmed on

<boxGeometry args={[2, 2, 2]} />

[DXaisaev]

Same issue.

[RamboGj]

Same issue here

[mh0223]

Same issue :(

[FeeqCodes]

After severall hours of debugging. here's a solution I found that works.

• Include the following overide in your eslintrc.cjs rules

"react/no-unknown-property": ["off", { "ignore": ["JSX"] }],

[JustFly1984]

this is just turning off the rule. it is not a solution.

[uselessscat]

Preferably use "react/no-unknown-property": ["error", { "ignore": ["args"] }], just to ignore the "args" property

[FeeqCodes]

Alright Thanks guys!

[shaktigit07]

"react/no-unknown-property": ['error', { ignore: ['css'] }], this is also work

[Yasmin-Akhter]

this ignores the error but doesn't solve the issue.

[alessiocancian]

when used with typescript it's safe cause unknown properties are still not allowed by typescript

[JaremyCheng]

Same issue here.

[Petsamuel]

[Petsamuel]

oh okay!

[ovr58]

Thank you so much - it worked for me - your solution with the package! I copied configs without @ in the beginning though

[Petsamuel]

Oh nice!

[nickells]

I am dying to know what he wrote.

[jynxio]

check out this link