error8 [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. [error] Component definition is missing display name useMemo 와 유사한 기능인 React 라이브러리의 memo 함수를 사용해보던 중 일어난 에러다 eslint 에서 또 한소리 하셨다 에러 원인 아래의 예처럼 React.memo 를 변수 Child에 저장하고 해당 변수를 console.log 로 찍어보면 const Child = memo(() => { console.log("재랜더링"); return 자식이래요; }); console.log(Child); 요런 객체를 확인 가능하다 memo 를 사용하면 위 그림의 displayName 속성에 memo 함수의 인자로 넣은 익명함수들이 들어가게 된다! 근데 왜인지 모르겠지만 displayName 의 값은 클릭해서 확인해보면 undefined 로 뜨고 에러가 나온다 해결 방법 아래의 코드를 추가해준다 Chi.. 2022. 12. 7. 이전 1 2 다음
