[Next.js] Recoil, Expectation Violation: Duplicate atom key 이슈

( 23. 07. 04 추가 수정 )

Recoil 0.7.6 버전 이후로 환경변수를 추가하면, Duplicate atom key 이슈를 해결할 수 있습니다.

.env* 파일에 아래 환경 변수를 추가해주시면 해결됩니다 !

RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false

 

 

 

 

(아래 부분으로도 해결가능하겠지만, Deprecated된 해결방법이라고 보시면 됩니다.)

 

Next.js 개발환경에서 Recoil을 사용하다 보면 Next.js 서버에 다음과 같은 에러가 콘솔로 찍히는 것을 볼 수 있습니다.

 

Duplicate atom key "KEY 이름". This is a FATAL ERROR in production. 
But it is safe to ignore this warning if it occurred because of hot module replacement.

 

 

해결 방법을 서치해보면, 크게 두 가지로 나뉩니다.

 

1.  atom key에 난수 넣기

2. node_modules 하위의 recoil 폴더에서 로그를 주석처리하기

 

 

 

 

개발이 어느 정도 이뤄진 상황에서는 모든 atom의 key 값에 난수를 넣는 건 어렵다는 판단이 들었습니다.

다른 레퍼런스를 찾아보면 registerNode 함수 console.warn만 주석처리하라고 했는데,

제가 설치한 recoil 버전 (v0.7.6)에서는 조금 다르게 구현이 되어 있었습니다.

 

 

 

저는 recoil 하위의 cjs, es, native, umd 폴더의 index.js 파일에서

checkForDuplicateAtomKey(node.key); 함수 호출을 주석처리해서 문제를 해결했습니다.