[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 (<anonymous>)

에러 원인

---

next.js 13.3.1 미만의 버전의 window 환경에서 "use client" 를 사용하여 클라이언트 컴포넌트 구현 시, 일반 함수로 함수형 컴포넌트를 구현하면 해당 에러가 발생함(next.js 의 버그로 보임)

 

해결 방법

---

해당 버그는 next.js 13.3.1-canary.4 버전에서 해결되었다.

이전 버전을 사용 중이라면 클라이언트 컴포넌트 구현 시, 해당 컴포넌트를 일반 함수를 사용한 함수형 컴포넌트가 아닌, 화살표 함수를 사용한 함수형 컴포넌트로 구현하고 export default 로 내보내면 해당 에러가 해결된다 (아래의 코드를 참고바란당)

"use client";

// 클라이언트 컴포넌트에서 일반 함수로 컴포넌트 구현 시 에러 발생함

export default function tokkissi() {
	return (
    	<h1>에러 발생!</h1>
        );
};


// 화살표 함수로 컴포넌트 구현 시 정상 작동함

const tokkissi = () => {
	return (
    	<h1>에러 해결!</h1>
    );
};
export default tokkissi;

---

아래는 참고한 해당 버그의 관련 이슈들이다

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

Upgrading to 13.3.0 cause SyntaxError: Unexpected token u in JSON at position 0 · Issue #48070 · vercel/next.js

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

[NEXT-978] `./app/[[...params]]/page.tsx` gives `SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>)` · Issu