Exceptional Violation: Duplicate atom key …
Recoil의 Duplicate atom key 오류와 당시 시도한 해결 방법을 정리한 기록.
ReactJS에서 사용할 수 있는 상태관리 라이브러리인 Recoil을 이용하여 개발하던 중에 마주친 에러로, 직역하면 Recoil의 atom 키 값이 중복되어 프로덕션 단계에서 치명적인 오류를 일으킬 수 있고, 모듈 교체로 인해 발생한 경우에는 무시해도 괜찮다는 말이다.
atom의 키 값을 전부 다르게 지정해도 이런 에러가 발생하는 경우를 볼 수 있다. 이런 오류는 atom의 키 값에 난수를 붙여줌으로써 해결할 수 있다.
자바스크립트의 기본 라이브러리인 crypto의 randomUUID함수를 이용해서 난수를 붙여주는 방법이 있고, uuid 라이브러리를 이용해서 난수를 발생시키는 방법도 있다. 혹은 직접 난수 발생 함수를 만들어서 사용할 수도 있다.
// crypto.randomUUID()
export const toDoState = atom<ToDo[]>({
key: `toDo/${crypto.randomUUID()}`,
default: local ?? [],
});lightweight uuid generator library js Code Example
이와 같은 에러를 겪는 사람들이 많았고, Github Issues에서도 이 주제에 관해서 토론하고 있었으며, intercept-stdout 라이브러리를 통해서도 이 문제를 회피할 수 있다고 이야기하고 있다.
[SSR][NextJS] Duplicate atom key during development and during production build in nextjs · Issue…
원문: Medium