'React'는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.

CRA + typescript 로 프로젝트를 시작했는데 아래와 같은 에러가 발생했다.

[Error] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
'React'는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.

주로 언급되는 해결방법 3가지는 아래와 같지만 내가 원한 해결방법이 아니었다.

내게 안맞았던 해결 방법

1. import React 해주기

import React from 'react'

React 17 이상부터는 new JSX transform을 지원해서,
import React from 'react' 를 모든 파일마다 일일이 작성하지 않아도 되는데, 굳이 모든 파일에 작성하는 것은 너무 비효율적이므로 PASS !

2. type script, react-dom 버전 확인 + tsconfig.json 설정 확인

1) typescript(ver 4.1 이상), react 및 react-dom(ver 17) 버전 확인하기
2) tsconfig.json 파일에 들어가서 complierOption에서 jsx 속성을 "react-jsx" 또는 "react-jsxdev" 로 설정해주기

// tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
  },
}

하지만 방금 시작한 프로젝트로 이미 모두 최신 버전 + tsconfig.json 파일도 이미 위와 같이 설정되어 있었다.

// package.json

{
  ...
  "dependencies": {
    ...
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.9.5",
  }
  ...
}

3. eslint 의 react-in-jsx-scope 를 off 해주기

세 번째 방법으로는 eslint 설정 규칙의 react/react-in-jsx-scope 를 아래와 같이 off로 하라는 것이었는데,

//.eslintrc.json

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

다른 사람과 함께 할 프로젝트도 아니어서 간단히 vscode의 extension 에 설치된 eslint 로만 사용할 것이었기 때문에 eslintrc.json 파일이 따로 없었다.

그래도 혹시나 하고 eslint extension 의 setting.json 에 들어가서 "eslint.notebooks.rules.customizations" 에 해당 룰을 추가해줘봤지만, 역시나 아무 소용이 없었다.

(+ eslintrc.json 파일만 추가해서 "rules": { "react/react-in-jsx-scope": "off"} 를 추가하는 방법도 당연히 소용 없었다.)

해결 방법

tsconfig.json 의 include 에 tsx 추가

결국 마지막으로 스택오버플로우의 댓글에서 찾아낸 해결 방법인 tsconfig.json 파일의 "include" 배열에 "**/*.tsx" 를 추가해주는 방법으로 드디어 해당 에러가 사라졌다.

// tsconfig.json

{
  "compilerOptions": {
      ...
    },
  "include": ["src", "**/*.tsx"]
}

(+ tsconfig.json 추가 후 바로 적용이 안돼서 에러가 안사라질 수도 있다. 이럴 때에는 vscode를 한 번 완전히 껐다 켜보자!)

참고 : 🔗 https://student513.tistory.com/82
🔗 https://rinn-story.tistory.com/31
🔗 https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module