Error: Minified React error #423;

❗️에러메모❗️

2023-10-15-error2.png

( feat .... 빨간색이 싫어집니다 ... )

Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

로컬개발시 문제 없어 vercel 에 배포를 하였는데 , 위 에러가 났습니다.

알려준 링크를 통해 들어가보니 , hydrating 하는 도중에 에러가 났고 , SSR 쪽에서 에러가 났음을 예측해 볼 수 있었습니다.

2023-10-15-error.png

배포시 , 새로 추가한 부분은 다음 함수였습니다. 최신 포스트 판별 함수인데 , new Data() 함수를 사용했었습니다.

ex-code ) 

function checkCurPost(dataPublished){

    let publishedDay = dataPublished.split("-");

    const today = new Date();
    // 현재 날짜를 가져옵니다.

    const formattedDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
    // 원하는 형식으로 날짜를 설정합니다.

    if(String(today.getFullYear()) === publishedDay[0] && 
        String(today.getMonth() + 1) === publishedDay[1] &&
        Number(today.getDate()) - Number(publishedDay[2]) < 4
        ){
            return true
    } else {
        return false
    }
}

해결하기 위해 구글링 하던중 , github issue 에서 언급이 된적이 있었는데 ,

new Data () 했을 경우에 클라이언트 시간 != 서버 시간 이 달라 , error 를 뱉게 되고 , 해결법은 2가지로 축약되었습니다.

solution-1 ) useEffect() 

const checkCurPost = (dataPublished)  => {

    const [date, setDate] = useState();

    let publishedDay = dataPublished.split("-");

    useEffect(() => {

        const today = new Date();

        if (String(today.getFullYear()) === publishedDay[0] &&
            String(today.getMonth() + 1) === publishedDay[1] &&
            Number(today.getDate()) - Number(publishedDay[2]) < 4
        ) {
            setDate(true);
        } else {
            setDate(false);
        }
    })

    return date;
}

useEffect 를 사용하여 클라이언트에서 강제로 렌더링을 시켜 해당 오류를 해결해 보았습니다.

solution-2 ) suppressHydrationWarning

return (
    <titme suppressHydrationWarning>
        {/* { .... content } */}
    </titme>
)

titme 태그에 속성으로 suppressHydrationWarning = "true" 로 설정할 경우 SSR 에서 서버와 클라이언트가 서로 다른 것을 렌더링할 때 발생하는 경고인데 , 이 경고를 경고로 발생시키지 않습니다. but 마크업의 개수가 많으면 성능상의 불이익을 발생시킬 수 있어 , 남용하지 말 것을 권장하고 있습니다.

avatar
By inwookim
2023-10-15