ChunkLoadError: Loading chunk 608 failed. , Uncaught Error: Minified React error #423; visit

에러

ChunkLoadError: Loading chunk 608 failed.
Uncaught Error: Minified React error #423; visit

vercel에 배포해놓은 몇개월 지난 애플리케이션에서 이런 에러가 생성됐다.

 

에러와 같이 노출된 화면에 써있던 문구

application error : a client-side exception has occurred (see the browser console for more information).

 

잘 작동하던 애플리케이션이기 때문에 좀 당황스러웠다. 심지어 내 컴퓨터에서는 작동하는데 다른 컴퓨터에선 작동 안하는 버그였다. (이 부분은 아직도 왜 그러는지 모름ㅜㅜ)

해결과정

몇 시간 헤맸지만 일단 처음에는 먼저 검색을 했다.

일반적으로 첫번째 에러는 아래 상황에서 이런 문제가 발생한다.

• 네트워크 연결 문제
• 잘못된 배포 설정
• 오래된 빌드 파일이 캐시된 경우
• 서버사이드 렌더링 타임아웃

두번째 에러는 아래 상황에서 이런 문제가 발생 한다고 한다.

• 주로 suspense boundaries나 비동기 컴포넌트에 문제가 있을 때 발생

여러가지 생각해봤을때 하나의 가설을 세우고 서버사이드 렌더링에서 문제가 생겼다 판단하고

애니메이션과 라우터가 있는 main 서버 컴포넌트에 error boundary를 씌워줬다.

 

코드

/components 폴더안에 errorboundary 를 작성해주고

'use client'
 
import { Component, ErrorInfo, ReactNode } from 'react'
 
interface Props {
  children?: ReactNode
}
 
interface State {
  hasError: boolean
}
 
class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  }
 
  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true }
  }
 
  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo)
  }
 
  public render() {
    if (this.state.hasError) {
      return <h1>죄송합니다. 에러가 발생했습니다.</h1>
    }
 
    return this.props.children
  }
}
 
export default ErrorBoundary

 

이거를 서버컴포넌트에 감싸줬다.

 

import dynamic from 'next/dynamic';
import { Suspense } from 'react';
import ErrorBoundary from '@/components/ErrorBoundary';

const HomeComponent = dynamic(() => import('@/components/home/homeComponent'), {
    ssr: true, // GSAP 사용으로 인해 SSR 활성화
});

export const metadata = {
    title: '',
};

export default function Home() {
    return (
        <div className="app-container">
            <ErrorBoundary>
                <Suspense fallback={<div className="loading-state">{/* 로딩 UI */}</div>}>
                    <HomeComponent />
                </Suspense>
            </ErrorBoundary>
        </div>
    );
}

 

여기서 dynamic을 사용해서 동적으로 임포트 해줬고 Suspense로 감싸줘서 hydration이 지연요소로 인해서 블로킹 되는걸 방지해줬다.

 

코드만 짠다고 끝나는게 아니라 이해도가 필요해서 너무나도 어려웠다..