Unknown property ‘?’ found 대처

React에서 R3F를 이용해 JavaScript로 개발할 때 아래의 그림처럼 프로퍼티에 빨간펜 선생님의 등장을 경험할 수 있습니다.

좋은 방법은 아니지만 Lint 옵션 중 react/no-unknown-property 속성을 비활성화 하면 해결 됩니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import js from '@eslint/js'
...
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
...
rules: {
...js.configs.recommended.rules,
...
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'react/no-unknown-property': 'off'
},
},
]
import js from '@eslint/js' ... export default [ { ignores: ['dist'] }, { files: ['**/*.{js,jsx}'], ... rules: { ...js.configs.recommended.rules, ... 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], 'react/no-unknown-property': 'off' }, }, ]
import js from '@eslint/js'
...

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    ...
    rules: {
      ...js.configs.recommended.rules,
      ...
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/no-unknown-property': 'off'
    },
  },
]

위의 코드는 eslint.config.js 파일의 내용인데, 16번째 코드를 새롭게 추가했습니다.