Next.JS에서 billboard.js를 사용할 때 maximum callstack Error

개발하다 어느 순간부터 코드를 고쳐서, Hmr 이 되거나,새로고침만 하면 RangeError: Maximum call stack size exceeded 가 나기 시작했다. 처음에는 어쩌다 한번 난건가 싶었지만, 지속적으로 발생하니 개발하는데에 많은 시간을 허비하게 됐고, 고쳐야겠다는 생각이 들었다.

처음엔 개발자 도구로 메모리 쪽을 확인해봤지만, 딱히 특이점이 보이지 않았다.
그래서 의심되는 부분을 주석처리 하면서 원인을 찾아갔다.
그러다 billboard.js 를 쓰는 부분을 지우니, 아무리 수정하고 새로고침을 해도 에러가 나지 않는 것을 확인했다.

결국 필요한 코드니 없애버릴 수는 없어서 dynamic import 로 하고, ssr: false 옵션을 주었더니 에러가 나지 않고 해결이 됐다. dynamic import 라도 ssr: true 일 때는 여전히 에러가 났다.
Next.js 전용 라이브러리가 아니다보니 서버에서 실행 될 때 뭔가 memory leak 이 나는 것 같다.
client 용 라이브러리도 많다보니 앞으로는 비슷한 상황이 있을 때 빠르게 대처할 수 있을 것 같다.

혹시 비슷한 현상을 겪는 다른 분들에게 도움이 되길 바랍니다.

사용 버전

nextjs: 12.3.6
@billboard.js/react: 1.1.0
billboard.js: 3.11.0