Next.js - Component cannot be used as a JSX component

 

실무에서 사용하는 Next.js의 Version이 9.x.x 대의 Old Version이라 이번에 큰맘(?)을 먹고 Next.js 12 Verison으로 Upgrade를 시켜주기로 결심했다.

 

사실 기존 프로젝트의 Package들의 Version을 올리면 발생하는 각종 다양한 문제들이 많아 굉장히 고심을했는데 역시나 많은 문제가 발생했고 그러면서 프로젝트에서 사용하고 있는 Typescript의 Type들의 문제,

 

각종 오픈소스 라이브러리들의 문제등 여러가지 문제들은 해결했다만 JSX관련 'Component' cannot be used as a JSX component 문제가 발생했고, 이 문제를 도저히 해결하기가 너무 힘들었다.

 

'Component' cannot be used as a JSX component 이 문제가 발생한 원인은 Next.js의 버전을 12 Version으로 올리면서 React, React-dom의 업데이트 및 React, React-dom의 @types 패키지들의 Upgrade 문제로 인해서 발생되는 것으로 결론 냈다.

 

특히 @types들의 문제가 아닐까 싶었다. 이 문제 때문에 Production 빌드도 안되서 계속 개발 일정이 밀리거나 긴급 BugFix를 못해 굉장히 난감한 상황이 발생했다.

 

이 문제를 해결해 준건 역시 Stackoverflow... 진짜 개발자들에게 Google과 StackOverFlow는 없어서는 안될 물과 같은 존재인거 같았다.

 

해결 방식은 다음과 같다.

 

package.json에 resolutions field를 하나 추가하고 @types/react, @types/react-dom의 대체할 버전을 정의한다.

그리고 yarn(npm) install을 해준다.(yarn.lock(package-lock.json) 파일이 있으면 삭제 후 install 해주는것을 추천)

 // package.json
 "resolutions": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
  },

resolutions field는 "선택적 의존성 해결"을 해줄 수 있는 Field다.

이 해결 방법은 공식 홈페이지에서 나와있는데(번역기..)

왠지 읽어봐도 잘 이해가 안가는데... 왠지 느낌상 Next.js 12 Version과 react, react-dom의 @types가 제대로 호환을 안하는게 아닌가 싶다.

 

package.json에 resolutions field를 추가해주므로써 빌드도, 개발 환경도 모두 해결됬다.👍

 

Ref.

Selective dependency resolutions | Yarn (yarnpkg.com)

Yarn

typescript - NPM package cannot be used as a JSX Component - Type errors - Stack Overflow