[error] '~' cannot be used as a JSX component.

async Server Component에서 데이터를 fetching 할 때 나는 에러.

 

 

이 문제는 TypeScript가 async Component를 이해하지 못해 발생하는 문제이다.

 

 

Server Side Rendering 사용중에, next 13의 기본 페이지인 page.tsx는 client side rendering 이 불가능해,

따로 component를 빼서 작업한 후,  page.tsx에 붙였더니 이런 에러가 났다.

컴포넌트 가져올 때 나는 에러는 처음이어서.. 왜 안되지 ㅠ ㅠ 하다가 chat GPT는 이런 답을 주었다.

 

⚠️ 시도 

오류 메시지는 JSX에서 'ChannelTab'이라는 구성 요소를 사용하려고 하지만 반환 유형이 유효한 React 요소가 아닌 Promise <Element> 이므로 유효한 JSX 요소가 아님을 나타냅니다.

JSX는 일반적으로 유형(구성 요소 또는 HTML 요소)과 props(속성)로 구성되는 유효한 React 요소를 반환하는 구성 요소를 기대합니다. 그러나 이 경우 'ChannelTab' 구성 요소가 대신 Promise <Element>를 반환하는 것으로 보입니다 .

이 문제를 해결하려면 'ChannelTab' 구성 요소가 약속이 아닌 유효한 JSX 요소를 반환하는지 확인해야 합니다. Promise는 일반적으로 API에서 데이터를 가져오는 것과 같은 비동기 작업을 처리하는 데 사용됩니다.

비동기적으로 데이터를 가져오고 약속이 확인된 후 구성 요소를 렌더링하려는 경우 상태 변수 또는 Redux 또는 React Query와 같은 상태 관리 라이브러리를 사용하여 약속을 처리하고 확인된 데이터로 구성 요소의 상태를 업데이트할 수 있습니다.

 

 

 

❗해결

 

구글을 뒤지다가 https://github.com/vercel/next.js/issues/42292 이 곳에 도달했고,

'SomeComponent' cannot be used as a JSX component. · Issue #42292 · vercel/next.js

그래서 Next.js 공식문서를 뒤져보았다.

Next.js 공식 문서에서는 아래와 같이 Component 위에 한 줄의 코드를 추가하라고 하였다. 아직 해결 중인가..

 

{/* @ts-expect-error Async Server Component */}

import { ExampleAsyncComponent } from './ExampleAsyncComponent';
export default function Page() {
  return (
    <>
      {/* @ts-expect-error Async Server Component */}
      <ExampleAsyncComponent />
    </>
  );
}

https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error

Configuring: TypeScript | Next.js