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

JSX를 사용할때 import React from 'react'; 를 매 파일마다 적어줘야한다. 는 오류 메시지 ! 

 

나는 리액트 18버전을 설치했고, 리액트 17버전 이후로는 컴파일러가 자동으로 추가해준다고 한다. 

Babel도 다시 설치해봤지만 그래도 컴파일이 안되는 문제가 발생했다.

아래 문서에 보니 리액트의 문제가 아닌 ESlint문제라고 한다. 

ESlint를 사용하지 않고 과제에서 진행한 프로젝트에서는 발생하지 않던 문제이다. 

 

.eslint.config.js에 아래 코드를 추가해도 ㅜ!!! 해결이 안됨 

  rules: {

    'react/jsx-uses-react': 'off', // React 17 이상에서 필요 없음

    'react/react-in-jsx-scope': 'off', // React 17 이상에서 필요 없음

}

 

https://kinsta.com/knowledgebase/react-must-be-in-scope-when-using-jsx/#2-update-eslint-configuration-fix-for-react-v17-and-higher

여기를 참조해서 해결했으면 좋았겠지만 여전히.. still...

 

요약하자면 

 

1. .eslintrc.js or .eslintrc.json file:

"rules": { // ... "react/react-in-jsx-scope": "off", "react/jsx-uses-react": "off", }

 package.json file:

"eslintConfig": { "extends": [ "react-app", "react-app/jest" ],

"rules": { "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off" } },

 

2. 최신 버전으로 설치하기

// npm

npm install react-scripts@latest

// yarn

yarn add react-scripts@latest

3. node modules 폴더 삭제하고 package-lock.json 파일 삭제후 npm 재설치하기

 

4. 리액트, 리액트돔 업데이트 하기

---

 

헐 나는 다른 문제를 해결하려고   .eslintrc.js 파일명 →  eslint.config.js 로 바꿔줬었는데 

알고보니 내가 앞에 . 을 찍어놨던거다. (.eslint.config.js)

그래서 그걸 제대로 수정했더니 해결이 됐다 ! ㅋ ;;;