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 nice!

[nickells]

I am dying to know what he wrote.

[jynxio]

check out this link

[joscormir]

It did not work at all for me, sorry.

[mmmoli]

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

Be careful. This looks like it works because the errors all go away, but in my case it actually just disabled eslint entirely.

Try running bun run lint or something and you see it complains that it can't find the plugins.

[ishamf]

If you're using TypeScript, seems it's safe to disable react/no-unknown-property entirely, TypeScript will detect these errors in its stead.

@types/three need to be installed for TS to check the three.js props.

[VictorioMolina]

same here

[kalopsia21t]

I have the same problems with "react/no-unknown-property" errors, is there any meaningful solution to this except turning the rule off? Appreciate any help

[devuxer]

Turning it off is the right solution if you are using TypeScript, since TypeScript checks for unknown properties anyway.

[lzw1998]

Hello, guys! I have the same problems with eslint 8.57.0 / typescript .
I have configured my eslint with flat mode and the config file is eslint.config.js.

My solution:
I happened to change the file name from [eslint.config.js] to [eslint.config.ts], and the problem was solved.

I hope it can help you guys.

[vlobanov]

Pretty sure that just disabled eslint