Linting shows multiple errors: @react-three/eslint-plugin (eslint 9)

[romankoho]

Hello,

I'm trying to make react-three-fiber compatible with linting (esLint v9).

I've installed this package
https://www.npmjs.com/package/@react-three/eslint-plugin#recommended

This is an excerpt of my eslint.config.js (flat config):

import ReactThree from '@react-three/eslint-plugin'
import { ReactThreeFiber } from '@react-three/fiber'

export default [
{
    files: ['**/*.{ts,tsx}'],
    plugins: {
      react,
      '@typescript-eslint': typescript,
      import: importPlugin,
      '@react-three-fiber': ReactThreeFiber,
      '@react-three': ReactThree
    }
]

My IDE shows errors

and also running eslint spits out multiple errors

57:12 error Unknown property 'position' found react/no-unknown-property
60:9 error Unknown property 'geometry' found react/no-unknown-property
61:9 error Unknown property 'material' found react/no-unknown-property
62:9 error Unknown property 'receiveShadow' found react/no-unknown-property
63:9 error Unknown property 'castShadow' found react/no-unknown-property
64:9 error Unknown property 'renderOrder' found react/no-unknown-property

What do I have to do to get rid of these errors?

[krispya]

Hello! You need to disable this rule: https://eslint-react.xyz/docs/rules/dom-no-unknown-property

ESLint assumes all React elements are DOM only and so it is thinks our Three properties are incorrect. The only option here is to turn it off as far as I know.

[romankoho]

thanks! I also found this thread discussing the issue (with the same recommendation)

#2487