[트러블 슈팅🔥] 프로젝트 - 팀 전체 build 시, error 발생 및 해결과정

🚨 문제 발생

1. build 시 위 이미지와 같이 어떠한 에러인지 정확하게 보여주지 않고, 모든 page에서 build error가 발생하였습니다.

 

🛠️ 문제 원인 분석

소거법으로 파일과 코드를 하나하나 비활성화 하며 문제 원인 탐색 후 찾아낸 문제의 코드들을 바탕으로 구글링을 통해 빌드 에러의 원인을 파악하였습니다.

 

🔥 문제 원인

1. Next.js의 경우, build 시 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행합니다.

• 하지만, 이 시점에서 Session storage 나 window 등 client 전용 객체를 참조하여 이 값을 사용하고 있던 모든 페이지에서 오류가 발생하였습니다. (* 서버에는 window나 document 같은 객체가 존재하지 않음.)

 

☠️기존 코드

/* src > store > useRoleStore */
export const useUserRoleStore = create<UserRoleState>((set) => ({
  isTeacher:  sessionStorage.getItem('isTeacher') === 'true' ,

  setIsTeacher: (value: boolean) => {
    set({ isTeacher: value });
      sessionStorage.setItem('isTeacher', value.toString());
    }
  }
}));

 

2. useSearchParams를 사용할 경우 해당 페이지가 클라이언트 사이드에서 렌더링되어 build 시점에 HTML이 비어있을 수 있어 오류가 발생하였습니다.

• Next.js는 ‘use client’를 사용하더라도 서버 사이드 렌더링이라 HTML이 비어 있는 문제가 발생하여 useSearchParams 와 같은 URL 매개변수 훅은 빌드 시점에서 빌드 에러가 발생하였습니다.

 

 

🪙 해결 방법

1. useEffect를 사용하여 렌더링 후 실행되도록 하거나 typeof window !== undefined 인 경우 체크하여 클라이언트 전용 객체가 서버 사이드에서 렌더링 될 수 있도록 해결하였습니다.

 

2. Suspense훅 사용하기

• 특정 구역의 컴포넌트 렌더링을 지연시킬 수 있는 기능을 가진 Suspense훅을 사용하여 데이터가 준비될 때까지 대기시키도록 하였습니다.
• 훅을 사용하여 childern이 로딩되기 전에 fallback을 사용하여 LoadingSpinner를 보여줄 수 있습니다.

(Next.js 공식문서 참고) https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout