[error] 'PostList' cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element

async 서버 컴포넌트를 타 컴포넌트에서 사용 시, 해당 에러 발생

'PostList' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

 

에러 원인

---

현재 Next.js 13.2.4 버전의 경우, async / await 서버 컴포넌트를 타 컴포넌트에서 사용 시, Promise<Element> 를 리턴하는데, 타입스크립트를 사용 중이라면 타입 에러가 발생한다. 

 

해결 방법

---

해당 에러는 Next.js 팀이 타입스크립트 팀과 해결 중에 있으며, 이 문제를 해결하기전까지는

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

위의 코드처럼 async / await 서버 컴포넌트 위에

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

를 붙여주어 에러를 없애주자

아래는 Next.js 13 의 공식문서의 해당 에러 관련 항목이다. 참고하자

https://beta.nextjs.org/docs/configuring/typescript#async-server-component-typescript-error

Configuring: TypeScript | Next.js