Next.js13으로 마이그레이션 도중 발생한 Apex Charts 오류

Import trace for requested module

npm i -D encoding

yarn add -D encoding

위 명령어 중 하나를 실행하면 해결 가능하다.

apex charts 에러

TypeError: Cannot read properties of undefined (reading 'toString')
Next.js13에서 use client를 사용한 페이지에서 ApexCharts를 사용했을 때, 빌드 시 ReferenceError: window is not defined라는 에러가 발생한다.
참고 사이트

위 사이트를 참고하여 상단에 'use client'를 사용하고 dynamic import를 통해 Apexcharts를 가져온 뒤, ssr를 false로 지정했다. 그럼에도 에러가 발생하면 width를 지정해 주면 내 경우에는 해결이 되었다. (이전 Next.js 12 버전에서는 에러가 발생하지 않았었다.)

ReferenceError: window is not defined

특정 컴포넌트에서 window.Kakao가 뜨지 않을 때 클릭했을 때 발생하는 오류를 해결하기 위해 다음과 같은 방법을 시도해 보았다.

원래 코드는 window.Kakao가 존재하지 않을 때는 disabled를 활성하고 window.Kakao가 나온 이후부터 카카오톡 공유 버튼을 클릭이 가능하도록 하는 구조였지만, Next.js에서는 빌드 시점에 window에 접근할 수 없기 때문에 에러가 발생했다.

그래서 다른 분들의 해결법들을 참고하여 다음과 같이 수정했다.

typeof window !== "undefined" ? window.Kakao === undefined : false

만약 window의 타입이 undefinedrk 아닐 때, window.Kakao가 존재하는지 검사하는 방법으로 수정했다.