증상
내웹사이트는 @modal 이라는 parallel route가 있고 거기에 모달로 쓰는 페이지들이 담겨있음.
route.push()를 써서 그 페이지들로 이동하게 함. 예시:
router.push(`/user/dashboard?${paramString}`);
그런데, development에서는 잘되는데 production에서만 route.push가 오작동함.
- development모드는 production보다 더 허용적이라고 함. 그래서 가끔 development에서 안뜨는 에러가 production에서 뜨기도 한다.
무슨 오작동이냐면, 화면에는 application error가 쓰고 콘솔에는 TypeError: e is not iterable 에러가 뜸.
- e is not iterable… 이 에러는 서로 다른 상황들에서 종종 나는데 아직 이해가 안된다. 걍 뭔가가 잘못됐다는 거구나 라고만 이해하고 있다.
근데? url을 수동으로 입력하면 또 페이지는 제대로 나옴.
- 페이지 렌더는 된다는 뜻.
- url을 직접 고치면 전체 페이지 렌더가 일어나기 때문에 에러가 안나는데, router.push를 이용하면 layout의 컨텍스트 안에서 부분만 고쳐지기 때문에 layout이 깨지면 에러가 나는것이라고 한다.
window.location.href를 써도 제대로 나옴.
- 이것도 url을 직접고칠때와 마찬가지로 전체 페이지 렌더를 일으키니까 에러가 안 나는 것이다.
- 하지만 내가 원하는건 전체 페이지 렌더가 아니기 때문에 나는 router.push를 써야 한다.
가능한 원인들
챗지피티와 함께 문제의 원인을 좁혀갔고 이런 가능성을 제시해 주었다.
- searchParam에 .toString()이 안된다거나 해서 url에 문제 있을 수 있음 → url에는 이상없음
- param이 유효하지 않은 경우가 처리되지 않을 수 있음
const hasParams = paramString.length > 0;
`router.push(hasParams ? `/user/dashboard?${paramString}` : '/user/dashboard');`
→ 일단 param이 있음을 확인하는걸 넣어줌. 그러나 해결되지 않음. 3. router.push를 할때 client-side routing을 트리거하게 되는데, 그러면 dynamic하게 route를 렌더하기 때문에 layout이나 slot이 뭔가 잘못되어 있을 수 있음
해결
챗지피티의 지시대로 두 가지를 고쳐보았다.
- 먼저 문제가 2번인 경우: layout의
{modal}을{modal || null}로 바꿔 맞는 modal이 없는 경우에도 hydration이 실패하지 않게 한다. - 문제가 3번인 경우:
@modal/default.tsx와@modal/page.tsx를 만들어준다. 나는 page가 없었어서 만들어줌.
그랬더니 고쳐졌다.
둘 중 무엇 때문에 고쳐진 걸까?
@modal/page.tsx였다.
export default function Layout() {
return null;
}