[error] 'SomeComponent' cannot be used as a JSX component 해결방법🤯

도비·2023년 10월 24일

이슈

회사 프로젝트 중 다른 팀원 분의 작업 내용을 이어 받아 작업할 일이 있었다. 밥값을 하기 위해 해당 브런치를 가져와 설치하고 나니 작업된 컴포넌트 중 swiper가 적용된 곳마다 빨간 물결 줄이 넘실거렸다.

팀원 분의 작업 환경에선 해당 오류가 나타나지 않았다. 브런치를 가져와서 yarn으로 install하며 무언가 충돌이 난 듯했다. build시에 잡히는 에러도 아니었기 때문에 일단 빨간 줄을 무시하고 작업을 진행했다. 마지막의 마지막의 마지막으로 미루다가 정말 마지막에 해결했다.

쉽게만 살아가고 싶은 삽질

해당 에러 메세지를 검색하면 여러 블로그와 해결 방법이 제시되어 있다. 당연히 모든 에러는 쉽게 해결해야 제맛이기 때문에 가장 손쉬워 보이는 것부터 따라해보자.

뭐가 됐든 이것부터 해봐라 방법

짜바리 개발자 인생에서 가장 먼저 배운 에러를 해결하는 방법은 먼저 yarn.lock 파일과 node_modules 폴더를 지워보고 다시 설치를 진행하는 것이다.

될리 없다.

구글 검색시 상위에 노출되는 솔루션 따라하기

먼저 해당 글을 발견하여 따라해봤다.
pakage파일에서 @types/react와 @types/react-dom을 dependencies에 옮겨봤지만, 글을 작성한 분도 실패한 방법이다.
다만 해당 솔루션을 읽어보니 React 18버전을 사용하고 있다면 type 문제가 있을 수 있다는 걸 알게 되었다.

악마같은 @types/react의 버전을 17로 내리면 해결이 된다는 귓동냥을 얻어들어 버전을 내리니 swiper에서 빨간 줄이 사라졌다! 그러나 이제 다른 라이브러리 컴포넌트에서 해당 에러가 넘실거리기 시작했다.

언제나 나보다 먼저 고통받은 어느 외국인의 솔루션

stackoverflow를 뒤져보며 typescript config options을 바꿔보았으나 내 경우에 해결되지 않았다. 그러다 어느 훌륭한 외국인이 react repo에서 해당 issue가 열린 링크를 걸어준 것을 발견했다.
해당 솔루션은 npm을 기준으로 작성되었는데 yarn은 npm처럼 따로 추가 라이브러리를 설치하여 preinstall을 설정해줄 필요는 없다.

해결 방법

나와 같은 고통을 겪는 사람에겐 다른 모든 말은 ssapsori일 뿐. 바로 코드로 넘어가겠다.

/// package.json

"dependencies": {
	...
    "@types/react": "17.0.38",
},
"resolutions": {
    "@types/react": "17.0.30"
},

resolution 옵션에 똑같이 17버전의 @types/react를 담아준 후 yarn.lock 파일을 삭제하고 다시 설치하면 해결 된다.

yarn resolutions?

yarn 문서를 읽어보면 해당 옵션 값에 대한 내용이 쓰여있다.

Selective dependency resolutions

문서의 제목에 쓰여진 것처럼 대충 '선택적 종속성 해결'을 도와주는 옵션이다.
내가 package 파일에서 @types/react의 버전을 17로 고정해두었다고 해도, 설치되는 라이브러리를 node_modules에서 까보면 종종 다른 버전을 가지고 있다. 해당 의존성 모듈이 @types/react을 무조건 최신 버전으로 받고 있는다거나, 나보다 높은 버전 가지고 있다면 에러가 발생할 수 있다.

resolutions 옵션을 주지 않은 채로 yarn list [module name] 명령어로 각 module에 어떤 식으로 설치되어 있는지 확인해보자.

├─ @types/hoist-non-react-statics@3.3.4
│  └─ @types/react@18.2.31
├─ @types/mui-image@1.0.1
│  └─ @types/react@18.2.31
├─ @types/react-dom@18.0.9
│  └─ @types/react@18.2.31
├─ @types/react-swipeable-views@0.13.1
│  └─ @types/react@18.2.31
├─ @types/react-transition-group@4.4.8
│  └─ @types/react@18.2.31
├─ @types/react@17.0.30
└─ react-intl@6.2.7
   └─ @types/react@18.2.31

대부분 module이 최신 버전을 받고 있으므로 17버전과는 충돌이 난다. 그럼 이제 resolutions 옵션을 준 채로 다시 yarn list [module name] 명령어를 줘보자.