Next.js 'use client' 에러 고치는방법

 

 

Next.js를 사용한다면  클라이언트 컴포넌트와 서버 컴포넌트를 분리해서 컴포넌트를 생성한다.

 

Next.js에서 클라이언트 컴포넌트를 사용하기위해서는 코드 최상단에 'use client'를 작성해두면되고, 이후에는 다양한 함수들을 사용할수있게 된다.

 

그런데 !!!!!

 

 

 'use client'를 사용하면

error - SyntaxError: Unexpected token u in JSON at position 0

at JSON.parse (<anonymous>)

뭐 이런 에러가 자꾸 뜬다.. 공식문서에서 해보라는 대로해도 똑같고 뭐 자꾸 JSON.parse 파싱에러가 자꾸뜬다...

 

그렇다고 use client를 안쓰면 

 1 | // 'use client';
 2 | import { useState } from 'react'
   :          ^^^^^^^^
 3 | 
 4 | export default function Counter() {
 4 |     const [count, setCount] = useState(0);
   `----

클라이언트 컴포넌트 선언이 안됐을때 뜨는 오류가 뜬다..

 

 

 

아 모르겟고...

 

해 결 법

결론: 

node_modules\next\dist\build\webpack\loaders\next-flight-loader\index.js 파일에서

const proxy = createProxy("${this.resourcePath}")


const proxy = createProxy(String.raw\`${this.resourcePath}\`)

첫줄로 되어있는걸  밑에
const proxy = createProxy(String.raw\`${this.resourcePath}\`) 

 

이걸로 변경해주면 된다..

 

 

 

 

에러뜨는 이유

 

뭐 찾아보니까 13.3.0버전에서만 일어나는듯?

윈도우 환경에서  path 경로를 읽을때 백슬래시랑 문자열 이스케이프 과정에서 오류가 발생한단다...

 

 

모르겠고 그냥 저 경로에 저 코드만 변경해주면 잘 작동됨 수고링~