'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 에러 해결

 

 

 

기존 React + JavaScript 를 사용하여 개발하던 프로젝트를 TypeScript로 변경하는 과정에서 에러가 발생했다.

.js 파일을 .tsx 파일로 변경하고 타입을 잡아줬는데도 에러가 잡히지 않았다.

 

에러 사진

 

에러 내용 

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

 

 

대강 'React'는 UMD 전역을 뜻하지만 현재 파일은 모듈이니 가져오기를 추가하는 것이 낫다 라는 뜻이다.

 

 

해결 방법

 

🔨 첫 번째 방법

가장 간단한 해결 방법은 각 파일에 React를 import 하는 코드를 추가해주는 것!

import React from 'react' 

 

하지만 이 방법은 각 파일에 일일이 추가를 해줘야하니 중복된 코드가 늘어나게된다.

 

 

🔨 두 번째 방법

✅ typescript 버전(4.1 이상)과 react, react-dom(17이상) 버전 확인 및 맞춰주기

✅ tsconfig.json 파일 생성, 설정하기

 

tsconfig.json 파일 생성 방법은 간단하다.

해당 프로젝트 최상단에 tsconfig.json 파일을 생성해주면 끝!

그리고 compilerOptions에서 jsx 속성을 밑의 코드처럼 설정해주면 된다.

// tsconfig.json 파일

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

 

cf)

tsconfig.json 파일을 직접 생성하고 싶지 않으면 

px typescript --init or tsc --init 을 통해 생성하는 방법도 있다!

 

 

---

Reference

 

 

https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module

'React' refers to a UMD global, but the current file is a module

 

https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories

Announcing TypeScript 4.1 - TypeScript