'Component' cannot be used as a JSX component 원인과 해결방법

 

아래와 같은 문제가 발생하였다.

 

'Component' cannot be used as a JSX component.

 

 

우선 근본적인 원인은, react가 18 버전대부터 많은 변화가 발생하며, @type/react 역시 18버전대부터 타입 정의에 대한 방식이 많이 변경되었다.

그래서 그런지, Next.js 환경에서 Dynamic Import 같은 컴포넌트도 이와 같은 에러가 발생하였다.

 

따라서 @type/react 버전을 17 버전대로 변경해주면 해결할 수 있다.

{
  "name": "create-react-app",
  "scripts": {
    ...
  },
  "dependencies": {
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/react": "17.0.38",
  }
}

 

 

@type/react를 17 버전으로 설치했는데, 여전히 문제가 발생해요.

@type/react 버전으로 변경했음에도 동일한 문제가 계속 발생하는 케이스가 있다.
원인은, 다른 의존성 모듈 중 @type/raect를 의존성으로 사용하는 모듈이 있는데, 거기서 임의로 해당 버전을 18 버전으로 설치를 하고 있는 듯 하다.

그래서 아래처럼 하위 종속성 버전도 특정 버전으로 고정시켜버리면, 17버전대로 설치되면서 문제를 해결할 수 있다.

{
  "name": "create-react-app",
  "scripts": {
    ...
  },
  "dependencies": {
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/react": "17.0.38",
  },
  "resolutions": {
    "@types/react": "17.0.38"  // <- here
  }
}

 

 

그러면 원래 React 18 버전대에서는 해당 문제를 어떻게 해결해야 하는지 잠깐 찾아봤는데, 딱히 관련된 글을 찾지 못했다.
(우선, 내가 직접 접한 문제가 아니여서 아직 크게 찾아보지 못함.)

 

Reference

TS2786 'Component' cannot be used as a JSX component