'React' must be in scope when using JSX 에러

'React' must be in scope when using JSX 에러

새 프로젝트를 생성했는데 JSX 태그에 ESLint 에서 에러가 생겼다.

 

`'React' must be in scope when using JSX`

 

`React v17` 버전부터는 이전과는 달리 React 를 컴파일 시 자동으로 가져온다.

따라서 모든 파일에서 React 를 가져올 필요가 없어졌다.

컴파일 전

function App() {
  return <div>Hi there!</div>;
}

컴파일 후

컴파일 후 자동으로 React 를 가져옵니다.

function App() {
  return React.createElement('div', null, 'Hi there!');
}

 

오류를 해결하기 앞서 package.json 파일에 react 와 react-dom 의 버전을 확인해보자.

 

---

React v17 이전 ―

import 누락 혹은 단순 입력 실수

해당 오류는 JSX를 사용할 때 `React` 를 import 하지 않았을 때 발생한다.

혹은 아래와 같이 단순 입력 실수에 의해서 잘못 import 된 경우에 발생한다.

 

import react from "react"

 

react 에서 `react` 가 아닌 `React` 를 가져와야 한다.

import React from "react"

 

React v17 이상 ―

ESLint config 옵션 추가

react 의 버전이 17 이상인데도 오류가 발생한다면 ESLint 오류일 가능성이 높다.

`.eslintrc.js` 혹은 `.eslintrc.json` 파일에 다음과 같은 옵션을 추가하면 된다.

 

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

 

 

---

마치며

문제 해결 완료 😎

'React' must be in scope when using JSX 오류는 React v17 이전에 react 라이브러리를 제대로 가져오지 않았거나 React v17 이후 ESLint 에서 오류가 발생하는 에러다.

혹은 node_modules 폴더 일부 종속성이 잘못 설치된 경우에도 발생한다. 이 경우 node_modules 를 삭제 후 npm i 를 통해 재설치 후 서버를 다시시작하면 된다.

 

---

참고

• How To Fix “React Must Be in Scope When Using JSX” Error (5 Methods)