[TroubleShooting] 'Example'은(는) JSX 구성 요소로 사용할 수 없습니다. TS2786

👋 개요

Webpack v4로 구성되어있던 기존 프로젝트를 Vite로 Migration을 진행하는 과정에서 해당 에러가 발생하였다.

TS2786: 'Example'은(는) JSX 구성 요소로 사용할 수 없습니다.
TS2786: 'Example' cannot be used as a JSX component

당시 개발 환경은 다음과 같다.

⚒️ 개발환경

• vite 4
• typescript 5
• react 17
• react-dom 17

 

💻 시도

처음에 react package에서 type을 못가져오는 것 같아서 tsconfig의 paths 값을 만져주었다.(vite.config.ts의 resolve.alias 값도 만져주었다.)

특정 부분에서는 해결되었으나 react와의 의존성이 있는 다른 라이브러리에서 같은 에러가 발생하였다.

node_modules 삭제 후 재설치도 해보았으나 같은 증상이 나타났다.

 

🩹 해결

결국 React를 18버전으로 업데이트 해주어 해결하였다.

$ yarn add react react-dom
$ yarn add -D @types/react @types/react-dom

 

 

 

신기한 건 해당 문구를 정확히 확인하기 위해 다시 같은 환경을 설정하였는데 해당 에러가 뜨지 않는다...🤔

다른 라이브러리와의 호환성 문제였던 것인가...