개발 에러

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

student513 2021. 6. 19. 18:20

 

 

Introducing the New JSX Transform – React Blog

Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most

ko.reactjs.org

늦은 감이 없잖아 있지만 React 17버전에서는 new JSX transform을 지원한다.

이를 적용하면 import React from 'react' 를 모든 파일마다 일일이 작성하지 않아도 되는데, 

성능의 향상까지 도모할 수 있다.

 

자세한 세팅 방법은 주제를 벗어나므로, 다음을 기약하도록 한다.

문제는 세팅을 마치고 각 파일들에서 import React from 'react'를 지우니 발생했다.

 

 

리액트로 개발하면서 한 번쯤은 봤을 법한 에러다.

그리고 다들 '모든 파일에 import React from 'react'를 작성하면 된다'는 해결법으로 빨간 줄을 지웠다는 것에 만족하고 끝냈을 것이다.

그러지말고 과감하게 필요없는 코드는 삭제해보자.

 

1. package.json을 들어가 모듈의 버전을 확인하고 업데이트하자.

  • typescript version of at least version 4.1
  • react and react-dom of at least version 17

2. tsconfig.json을 들어가 complierOption을 'react'가 아니라 'react-jsx' 혹은 'react-jsxdev'로 바꿔주자.

 

이 아름다운 세팅이 모두 설정된 react 템플릿을 공유하고 있으니 간편하게 이용해주길 바란다.

 

student513/react-dev-template

react 작업환경이 세팅된 템플릿. Contribute to student513/react-dev-template development by creating an account on GitHub.

github.com

 

출처

 

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

I updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScript. I know with this new version you don't have to repetitively import React from 'react'. However, wit...

stackoverflow.com