[Type Error] 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.

현재 부분적으로 회사의 React App을 NextJs App으로 마이그레이션 중이다.

회사 NextJs App의 React 버전을 16.8.0 -> 17.0.39로 업데이트를 하고 난데없는 에러가 발생하였다. 

 

에러의 발견

[Type Error] <Icon /> 'ReactElement<any, any> | Component<{}, any, any> | null' 
             is not a valid JSX element.

빌드 중 아무 문제 없던 아이콘 컴포넌트에서 에러가 발생한 것이다.

 

해당 컴포넌트는 동적으로 필요할때만 컴포넌트를 import 하여 App의 성능을 높여줄 수 있는 NextJs의 dynamic()을 활용한 Icon 컴포넌트였다. 아무 문제 없이 사용해왔기에 더 당황스러웠다. 

 

문제 해결과정

오류 메세지를 기본으로 구글링에 들어갔다. dynamic()의 return된 변수는 typescript에서 Component<{}> type에 속한다.

React.ComponentType<{}>

해당 키워드와 JSX.Element 그리고 검색에서 나오는 여러가지 키워드들을 계속 조합해서 검색했지만 비슷한 에러라도 발생하는 상황이 너무 다르기 때문에 모두 해결이 되지 않았다. yarn cache도 clean해보고 yarn.lock 파일도 지워보고 node_modules도 뒤져보고 지워보고 다시 깔고 Component Type도 이것저거 지정해보았지만 모두 Fail! 

그런데 공통적으로 나오는 이야기들이 react 버전에 대한 이야기들이었다. 

그래서 빨간줄 위에 마우스 오버하면 나오는 에러메세지 가장 아래 부분에 집중해보았다.

Type{} is not assignable to type 'ReactNode'

 

많은 에러가 devDependencies의 @types/react 의 버전이 '*'로 설정되어 있어 발생하는 문제들이라고 했지만 우리 회사 설정에는 이미 설정이 되어 있는 부분이었다. 

"devDependencies": {
    ...,
    "@types/react": "17.0.39",
    }

 

 

결론

package.json의 resolutions 라는 필드가 있다. 의존성들의 버전의 범위를 지정해 줄 수 있는 옵션이고 해당 필드에 다시 한번 리액트 버전을 명시해주니 곧바로 해결이 되었다! 추가적으로 발생한 소소한 에러가 몇가지 있었지만 후다닥 수정하고 빌드에 성공하였다.

// package.json  
  {
  	...,
     "dependencies": {
       ...
      },
      "resolutions": {
        "@types/react": "^17.0.39"
      }
  
  }

 

 

 

삽질은 길지만 해결책은 의의로 간단하다는 것 ....

똑같은 이슈로 고생하는 개발자분들에게 빠른 해결책이 되는 글이 되었으면 좋겠습니다~!

 

 

 

참고 React18 : Type{} is not assignable to type 'ReactNode' 해결