[오류] 'React' refers to a UMD global, but the current file is a module

 

 

타입스크립트에서 해당 에러가 발생했다.

 

 

 

 

문제가 발생된 코드 

 

 

interface ErrorProps {
  err: string;
}

const ErrorFallback: React.FC<ErrorProps> = ({ err }) => {
  console.log(err);
  return <div>{err}</div>;
};

export default ErrorFallback;

 

 

 

 

에러의 원인

 

 

JSX 트랜스폼을 지원하는 React 17버전에서 

import React from 'react'를 하지 않아도 되었는데 

타입스크립트가 이것을 인식하지 못하고

에러를 보여주고 있는것,.

 

 

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

 

 

 

 

 

 

 

 

JSX transform이란?

---

 

Introducing the New JSX Transform – React Blog

 

 

 

브라우저는 JSX를 이해하지 못하므로

리액트 유저들은 JSX코드를 일반 JS로 변경하기위해 

Babel이나 typeScript같은 컴파일러를 의존한다

 

CRA또는 Nextjs도 JSX 형변환을 포함하고 있다. 

 

 

변경된 부분

1. React를 import하지 않아도 됨
2. 컴파일된 아웃풋이 미세히 번들 사이즈 측면에서 개선됨
3. 리액트를 배우기 위한 많은 컨셉을 감소시키는 미래의 개선점을 가능하게 할 것

 

 

(...생략...) 

 

 

 

 

에러 해결

---

 

컴파일러 옵션에서 jsx를 react에서 react-jsx로 변경 

 

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