[react/no-unknown-property] rule conflicts with `@react-three/fiber` on `<mesh />` and other tags

See original GitHub issue

I’m using @react-three/fiber in my app, and updating eslint-plugin-react broke the linting.

You did not took into account custom renderers while introducing this changes.

on <mesh /> false negatives:

Unknown property ‘castShadow’ found Unknown property ‘receiveShadow’ found Unknown property ‘dispose’ found Unknown property ‘geometry’ found Unknown property ‘userData’ found Unknown property ‘rotation’ found

on <meshStandardMaterial /> false negatives:

Unknown property ‘metalness’ found Unknown property ‘roughness’ found Unknown property ‘side’ found

on <planeBufferGeometry />

Unknown property ‘args’ found

on <meshPhongMaterial />

Unknown property ‘flatShading’ found Unknown property ‘shininess’ found Unknown property ‘side’ found Unknown property ‘specular’ found

and a lot more.

Please fix support for @react-three/fiber

Meanwhile I had to disable react/no-unknown-property rule

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:8
  • Comments:21 (9 by maintainers)

github_iconTop GitHub Comments

8reactions
ljharbcommented, Sep 12, 2022

The HTML standard says they shouldn’t, and it’s the authority on that.

5reactions
ljharbcommented, Nov 15, 2022

@CodyJasonBennett I’m not sure what you mean. Anything lowercased either conforms to the html standard or is invalid, incorrect, and bad - that’s just the way react works.

Read more comments on GitHub >

github_iconTop Results From Across the Web

eslint-plugin-react rule react/no-unknown-property false ...
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:....
Read more >
(No title)
I'm using React Three Fiber with TypeScript ...
Read more >
How does it work? - React Three Fiber Documentation
React Three Fiber is a React renderer for three.js. This means that each Fiber component ... For meshes and other three.js objects, rules...
Read more >
Introduction to React Three Fiber
Mesh : Mesh is just a holder for Geometry and Material and defines the position of an object in the 3D space. We...
Read more >
Tutorial: Use react-three-fiber to render 3D in-browser visuals
Start creating 3D for the frontend with react-three-fiber from this code-along tutorial. You'll learn: scene set-up; object (mesh) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found