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는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다.
Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고한다.
문제를 해결하는 방법으로는
interrupt-stdout 모듈을 사용해서 에러메세지를 무시하는 방법과
난수를 사용해서 에러메세지가 뜨지 않게 하는 방법이 있다.
npm i --save-dev @types/uuid
import { atom } from "recoil";
import { v1 } from "uuid";
import { UserData } from "../types/mainType";
export const userState = atom<UserData | null>({
key: `userState/${v1()}`
default: null
});