[Error] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

vscode를 껐다 켰더니 갑자기 모든 파일에서 오류를 뱉어내기 시작했다.

import React from 'react'

생략해도 되는 이 import문을 다 적어 달란다. 

 

이미 파일 갯수가 몇십개인데 그런 미친짓은 안해야지.

원래 됐으니까 방법이 있을거라 확신하고 찾아봤더니 react가 17버전알 때 발생하는 오류로,

tsconfig.json 파일에서 

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

이렇게 설정하면 괜찮아 진다고 했다.

그렇지만 tsconfig.json 파일엔 이미 아래처럼 설정이 되어있었다. 심지어 나는 react 버전이 18이었던 것.. 

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["dom", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],
    "jsx": "react-jsx",
    "module": "commonjs",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dist",
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  }
}

 

해결 방법

아무리 생각해도 eslint쪽에서 터진 것 같아 찾아보니 해결방법을 찾았다!

• .eslintrc.json 파일 rules 설정하기

.eslintrc.json

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

 

 

아래 블로그를 참고했다!

https://velog.io/@100pearlcent/ESLint-%EC%82%AC%EC%9A%A9-%EC%8B%9C-React-import%EB%AC%B8-%EC%83%9D%EB%9E%B5%ED%95%98%EA%B8%B0

ESLint 사용 시 React import문 생략하기

 

비하인드

오류문을 다시 캡처하려 rules 주석처리를 했는데 오류가 안떴다는 ..