crypto.randomUUID is not a function 오류

React Router caught the following error during render 
TypeError: crypto.randomUUID is not a function

 

 

개발환경에선 문제없던 프로젝트가 고객사 서버에 올리니 위와 같은 오류가 발생.

확인해보니 Skeleton UI 컴포넌트 쪽에서 에러가 난거였고, crypto.randomUUID()는 최신 브라우저나 Node.js 14.17 이상에서만 동작하는데, 내가 돌린 환경에서는 이 함수가 없어서 터졌던 거였다.

 

원인을 요약하자면,

• crypto.randomUUID()는 환경에 따라 아예 존재하지 않을 수도 있음
• 특히 개발 중 SSR이나 테스트 환경, 구형 브라우저에선 에러 터질 수 있음
• key에 randomUUID()를 매번 써도 안 좋은 게, 렌더링마다 key가 계속 바뀌면 React가 컴포넌트를 다시 그려버려서 성능 저하됨

 

아래처럼 generateUUID()라는 함수를 하나 만들어서 해결했음.

 

 

// utils/common.ts

export const generateUUID = (): string => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        const r = (Math.random() * 16) | 0;
        const v = c === 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
    });
};

 

import { generateUUID } from '@shared/utils/common';

{Array.from({ length: 3 }).map(() => (
  <div key={`row-${generateUUID()}`}>

 

 

결론은

 

• Skeleton UI 자체가 잘못된 게 아니라 key로 crypto.randomUUID()를 쓰는 방식이 문제였음
• 렌더링 자체는 정상인데 key 때문에 React가 제대로 못 그리는 상황이었고 generateUUID()로 대체하니까 문제 해결됨