[Next.js] cannot be used as a jsx component.

문제

오랜만에 뜯어본 Next.js의 게시판 프로젝트에 다음과 같은 에러가 발생했습니다.

비동기 함수인 <Header> 컴포넌트는 프로미스 객체를 리턴합니다.

하지만 이게 왜... 문제죠?

멋진 icyJoseph의 의견에 따르면

typescript가 async 컴포넌트를 이해 하지 못한다고 합니다.

따라서 해당 주석을 달아 임시방편으로 오류를 해결할 수 있다고 합니다.

 

해결방안 1. 주석달기

export default async function Home() {
  return (
    <>
      {/* @ts-expect-error Server Component */}
      <Header />
      <Main>
        <Aside />
        <div>뭔가 멋진 메인 사진을 걸고 싶어요 캐러셀같은거 넣으면 좋겠다</div>
        <Aside banner={"banner"} />
      </Main>
      <Footer />
    </>
  );
}

아무래도 주석이 있는 것은 영 찜찜합니다.

 

해결방안 2. 업데이트하기

역시 정답은 공식문서에 있었습니다.

TypeScript 5.1.3 이상 @types/react 18.2.8 이상이어야 해당 에러가 안 뜬다고 하네요!

npm install @types/react@latest typescript@latest

위 명령어를 통해 업그레이드를 하고 나니 오류 문구가 사라졌습니다. 

 

Ref

https://github.com/vercel/next.js/issues/42292

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

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

Configuring: TypeScript | Next.js