[Bug] client 컴포넌트가 서버 사이드 렌더링으로 렌더링되는 오류

[punchdrunkard]

요약

상황 (재현방법)

1. 어디에서 '...'
2. 어떤 행동을 했더니 '....'
3. 에러가 발생했다.

• use client를 사용하는 컴포넌트가 SSR 단계에서 import 되어 Refernce Error 가 발생하는 중.
• 해당 컴포넌트를 페이지에서 사용하지 않는 경우에도 발생함.
  • 해당 컴포넌트를 사용하는 로직은 오직 component/index.ts에서 export 하는 경우이므로, export 방식에서 문제가 생겼을 것이라는 추측이 들기도 한다.

스크린샷

가능하면 첨부해주세요

기타

Add any other context about the problem here. ex) 참고할 만한 자료

https://www.reddit.com/r/nextjs/comments/1063xhw/use_client_not_working_as_expected/

비슷한 에러를 찾아보니, export 방식에 문제가 있는 것 같기도 하다. 문제가 생기는 컴포넌트들에 한해서 default export 를 사용해봐야 곘다.

[punchdrunkard]

• Next.js 에서만 그런지 모르곘지만 import 방식에따라서 뭔가 영향을 받는 것 처럼 보임.
• 이 후에 다른 버그를 막기 위해서라도 다른 컴포넌트들에 대해서도 default import로 바꾸는 것을 고려
• 우선은 그 다음 부터 만들어지는 컴포넌트에 대해서 적용