'Component' cannot be used as a jsx component 에러 해결

[soryeongk]

문제 상황

개발에서는 문제가 없었지만, yarn build에서 _App.tsx부터 type error가 발생합니다.

'Component' cannot be used as a jsx component

jsx component가 단일 컴포넌트가 아니어서 생기는 워닝이라고 말하는 사람도 있는데,
우리는 잘 했단 말이지ㅠ

해결 방법

일본 개발자가 작성한 블로그 글을 보고 해결했습니다.
https://zenn.dev/mym/articles/103a4337144db3

package.json의 resolution에서 @types/react 버전을 묶어둠으로써 해결했다고 하는데,
마지막에 "해결은 했지만 조금 더 조사해 봐야겠다(解決はできたけども、なぜこれでうまくいくのかはよくわかりませんでした。（もう少し調査する必要がありますね。）)"라고 적고 끝났더군요
그래서 제가 톺아봤습니다!!

package.json의 resolution 추가

package.json에 resolution로 "@types/react": "17.0.40"를 추가하고 node_modules를 재설치하면 빌드 에러가 해결됩니다.

resolution은 모듈의 특정 버전을 묶어두는 용도로 많이 사용됩니다.
그래서 간혹 버전 업데이트에서 누락된 버그 등의 이유로 최상위 버전을 사용하지 않는 경우 resolution을 명시하기도 한다고 합니다.

@types/react 버전에 문제가 생긴 이유

yarn list @types/react를 통해 확인해보면, 아래 사진과 같이 @types/react의 버전이 꼬인 것을 볼 수 있습니다.

우리 react는 17.0.2를 사용하고 있고, @types/react는 17.0.40을 사용하고 있지만, react-dom은 18.0.5를 사용하면서 @types/react의 버전이 꼬인 것입니다.
그래서 react-dom의 버전을 낮추거나 @types/react의 버전을 묶는 것이 필요한것입니다 🙂

우리는 react 18로 업그레이드할 예정(useDeferredValue를 써야해서)이기 때문에, 일단 @types/react 버전을 묶는 것으로 해결했습니다!

해결 후 yarn list @types/react를 통해 확인해보면, 꼬인 버전 없이 잘 설정된 것을 볼 수 있습니다.

[Gyuminn]

@types/react 의 버전을 묶는 것 외의 방법도 있나요!?

[soryeongk]

충돌이 나는 버전들을 통일하면 됩니다! 가령, 이 경우에는 react-dom의 버전을 낮추는 방법이 더 바람직하지만, 곧 18로 업그레이드할 예정이었기 때문에 일단 묶는 것으로 해결했던 것이었습니다!