Next.js/errors3 [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' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, key 에러 원인 현재 Next.js 13.2.4 버전의 경우, async / await 서버 컴포넌트를 타 컴포넌트에서 사용 시, Promise 를 리턴하는데, 타입스크립트를 사용 중이라면 타입 에러가 발생한다. 해결 방법 해당 에러는 Next.js 팀이 타입스크립트 팀과 해결 중에 있으며, 이 문제.. 2023. 4. 29. [error] SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) Next.js 13.2.4 버전 에서 클라이언트 컴포넌트 구현 시, 해당 에러 발생 error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () 에러 원인 next.js 13.3.1 미만의 버전의 window 환경에서 "use client" 를 사용하여 클라이언트 컴포넌트 구현 시, 일반 함수로 함수형 컴포넌트를 구현하면 해당 에러가 발생함(next.js 의 버그로 보임) 해결 방법 해당 버그는 next.js 13.3.1-canary.4 버전에서 해결되었다. 이전 버전을 사용 중이라면 클라이언트 컴포넌트 구현 시, 해당 컴포넌트를 일반 함수를 사용한 함수형 컴포넌트가 아닌, 화살표 함수를 사용한 함수형 컴포넌트로 구현하고 e.. 2023. 4. 13. [error] Hydration failed because the initial UI does not match what was rendered on the server Next.js 13.2.4 버전에서 개발 중, yarn dev 로 실행하여 캐러셀 컴포넌트를 클릭 시 발생한 에러 에러 원인 배포 전, yarn dev 로 next.js 웹 어플리케이션을 실행 후, 링크에 연결 후 빠르게 캐러셀에 클릭 등 유저 이벤트 발생 시 해당 에러 발생 해결 방법 해당 에러는 개발 중인 페이지를 yarn dev 로 실행 시, 빌드 하지 않고 ssr 이나 csr로 랜더링 되는 next.js 의 특성 상 발생하는 에러이다. yarn dev로 실행 시, 빌드되지 않은채로 ssr이나 csr 로 랜더링 된다. 이때 pre-rendering 된 요소에 hydration 이 완료되기 전에 접근하게 되면 해당 에러가 발생한다. 빌드 후 배포 시에는 pre-rendering과 hydration 사.. 2023. 2. 28. 이전 1 다음
