[문제 해결] Recoil : Duplicate atom key

Expectation Violation: Duplicate atom key "~~~~~~"

Expectation Violation: Duplicate atom key "~~~~~~".

This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.

원인

https://github.com/facebookexperimental/Recoil/issues/733

In development, when a file is changed, Next.js re-builds the relevant page entry file.Because it's the same Node.js process, the atom has already been declared.The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the atom is declared inside a component lifecycle/hook and only that is being hot-replaced.

Next.js 개발 중 파일이 변경되면 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다.

key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 선언된 값을 사용해서 문제가 발생한다.

Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고한다.

문제를 해결하는 방법으로는

interrupt-stdout 모듈을 사용해서 에러메세지를 무시하는 방법과

난수를 사용해서 에러메세지가 뜨지 않게 하는 방법이 있다.

해결

1. 난수 생성해주는 uuid 모듈 설치 (typescript)

npm i --save-dev @types/uuid

2. key 에 난수 추가하기

import { atom } from "recoil";
import { v1 } from "uuid";
import { UserData } from "../types/mainType";

export const userState = atom<UserData | null>({
  key: `userState/${v1()}`
  default: null
});