Eslint | react/react-in-jsx-scope off가 작동이 안되는 경우

** 리액트 17버전 부터 import React 구문 필요 없어졌다. npm run build로 자바스크립트 파일 크기 비교하면 트리쉐이킹 덕분에 해당 구문이 있나 없나 크기는 같지만 빌드 시간 감소한다는 장점이 있고 저 코드가 있는게 지저분해보여서 해당 부분의 오류를 없애 주려고 했다. 

 

그래서 아래 코드를 .eslintrc.js > rules 에 추가했다. 

 

하지만 husky로 lint-staged 검사를 했을 때 해당 룰이 먹히지 않고 계속 import React 구문을 넣으라는 에러가 떴다. 

Error: 'React' must be in scope when using JSX react/react-in-jsx-scope

 + Warning: React version not specified in eslint-plugin-react settings 

 

위 두가지가 계속 떴다.그리고 Warning 옆에 아래의 사이트를 참고하라는 메세지가 같이 있었다.

 

GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint

 

 

Configuration을 보면

v.8.21.0부터 .eslintrc 이름이 더이상 사용되지 않는다. 대신에 eslint.config.js 이름으로 파일을 만들어라. eslint v.8에서 레거시 시스템인 .eslintrc이 여전히 지원될수도 있지만 v9는 안된다.

나는 v9 -> v8.34.0로 다운그레이딩을 했기때문에 저 문장을 신경 안쓰고 있었다. 그러데 왠걸... 아무리해도 안되다가 이 파일이름 하나 .eslintrc ->  eslint.config.js 로 바꿔주니깐 바로 해결됬다.. 먼저 파일 이름을 변경해보고 오류 해결이 안되는 경우에 아래의 해결법을 참고 하길 바란다. 

 

추가 해결책

// eslint.config.js
...
parserOptions: {
		ecmaVersion: 'latest',
		ecmaFeatures: { // 이 코드 추가!
			jsx: true,
		},
		sourceType: 'module',
		project: './tsconfig.eslint.json',
},
rules: {
		'react/jsx-uses-react': 'off',
        ...
}