[next.js] Its type '() => Promise<JSX.Element>' is not a valid JSX element type. 에러

next 강의 듣던중, async쓰니까 vscode에서 에러가 뜸... + yarn build시에도 작동안함

이유 : next 14에서 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환,

typescript 5.1이하에서 발생

 

방법1 : typescript + react 버전을 올리기 (근데 react 19버전으로 올라가서 비추...)

방법2 : 에러나는 곳마다 밑에 주석 추가하기(귀찮...)

<Suspense fallback={<Loading />}>
   {/* @ts-expect-error Async Server Component */}
   <NewProductList />
</Suspense>