[React] 리액트 + 타입스크립트 import React 없애기

 

요즘 리액트18 버전으로 타입스크립트 셋팅을 하고 있던 와중 기본 리액트에서 잘 됐던 웹팩 설정이 안 먹혀 해결방법을 알아보았습니다.

 

webpack.config.js

---

...

plugins: [
    new Webpack.ProvidePlugin({
        React: "react",
    }),
],

...

 

이전 자바스크립트에서 사용했을 때 처럼 아래와 같이 웹팩에서 ProvidePlugin()으로 리액트를 설정해주면 jsx 파일에서 'import React form 'react' 선언을 안해줘도 됐었습니다.

 

그런데 타입스크립트에서 설정을 했을 때는 아래와 같은 오류가 발생하더군요.

 

Error Message

---

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

 

해결방법

---

tsconfig.json

{
    "compilerOptions": {
        /* 기본 옵션
        // "incremental": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "lib": ["ES2020", "DOM"],                 
        "jsx": "react-jsx", // <- "react-jsx"로 변경
        "target": "es5",                          
        "module": "ESNext",                       
        "moduleResolution": "Node",
        "strict": true,                             
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
            "@": ["src/*"]
        }
    }    
}

 

"react"에서 "react-jsx"로 변경해줍니다.