Next.js You cannot dot into a client module from a server component 에러
Next.js 서버 컴포넌트 에러
Cannot access Box.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
세상이 좋아졌다. 분명 작년인지 재작년인지 까지만 해도 MUI 컴포넌트를 Next.js 서버 컴포넌트에서 사용할 수 없어 무조건 "use client" directive를 사용했어야 했던 것 같은데, 직렬화 가능하다는 전제조건 하에서1 서버 사이드 렌더링이 가능해졌다.
문제는 졸린 와중에 작성한 코드에서 발생했다. 본 포스트 최상단에 기재해 놓은 에러가 바로 이번에 마주한 에러 메세지이다.
원인 파악
너무 졸려서 그랬을까? 혼란스러웠다. 왜냐하면 다른 페이지에서 사용하는 MUI Box 컴포넌트는 아무런 문제가 없었기 때문이다. 왜 이 페이지에서만 문제가 생겼을까 하는 생각에 커피를 한 잔 마시고 바람을 쐬고 다시 앉아 코드를 보니 차이점이 바로 보였다.
.map()
원인은 바로 Array.map을 사용해 컴포넌트를 생성하는 과정에 있었다. 어처구니 없게도, 아무리 졸렸다지만, 용납할 수 없게도 나는 해당 Box 컴포넌트를 key 프로퍼티 없이 생성해버렸다.
{data.map((channel) => (
<Box>{channel.ownerName}</Box>
))}
아래와 같이 변경하니 잘 되더라.
{data.map((channel, index) => (
<Box key={index}>{channel.ownerName}</Box>
))}
결론
결론에 앞서 변명부터 좀 해 보자면, 에러 메세지만 봐서는 key 프롭이 없어서 발생한 문제라는 것을 알아채기 힘들다. 내가 이 문제를 해결할 수 있었던 이유는 Array.map을 사용해 컴포넌트를 생성할 땐 항상 key 프롭을 지정해야 한다는 기본을 (비록 까먹었었지만) 알고 있었기 때문이다.
아무튼, 결론은 이 에러 메세지가 출력되었다면 우선 mapped component의 key property가 존재하는지 확인하라는 것이다.
물론 해당 에러 메세지가 무조건 이 상황에서만 발생하는지는 알 수 없으므로, 위 사항에 해당이 없음에도 해당 메세지가 발생한다면 구글링을 해보도록 하자.
주로 핸들러가 없는 컴포넌트. 말 그대로 직렬화하여 서버에서 클라로 전송이 가능해야 한다. ↩︎
댓글
댓글 쓰기