오랜만에 배포를 진행하려는데 너무나 당연하게 사용하던 라이브러리(react-youtube)에서 갑자기 type문제가 발생하였다.
(왜그러는데;)
조금 찾아보니 react18업데이트(22.03.08) 이후 type 적용이 일부 불안정한 부분이 있었던 것으로 확인되어, 해결방법을 공유해보고자 한다.

Disclaimer

이 해결책은 React 18 미만 버전 사용자들이 적용 가능합니다
Build환경은 yarn을 사용했습니다

문제 상황

React 18미만 버전을 사용하면서, 갑자기 안생기던 type error가 발생한다
해당 type error는 reactNode와 연관있다

가령 아래와 같은 형태

error: 'FontAwesomeIcon' cannot be used as a JSX component.

해결책

dependency 라이브러리 내부적으로 type을 *로 적어놔서 자동으로 18이 반영되는?...현상이 일어나는 것으로 현재 추측되고 있다.

빠르게 해결하려면, overrides나 resolution을 사용해서 현재 내 react version에 맞게 적절하게 @types/react버전을 명시해주면 된다

Yarn 사용 시

package.json에다가 아래와 같이 기재한다

  "resolutions": {
    "@types/react": "^17.0.38"
  }

npm 사용 시

package.json에다가 아래와 같이 기재한다

  "overrides": {
    "@types/react": "^17.0.38"
  }

참고자료

https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors/71828113#71828113