[Recoil] Duplicate atom key 에러 메시지 없애기 (Next.js, Vite)

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.

개발 환경에서 Recoil을 사용할 때 HMR 때문에 Recoil 관련 파일이 변경될 때마다 이러한 에러가 뜨곤 한다. 주로 Next.js나 Vite를 사용하면 이러한 에러를 볼 수 있는 것 같다.

 

이와 관련한 이슈가 계속되자 0.7.6 버전에서 이 에러를 띄우지 않게 하는 RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED라는 설정이 새로 추가되었다. 환경 변수에서 이 값을 false로 설정하면 더 이상 이런 에러가 뜨지 않게 된다.

 

.env 파일에 아래와 같이 작성하면 된다.

RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false

 

만약 Vite 환경에서 개발하고 있다면, VITE_ 접두사가 없어서 적용이 되지 않을 것이다. (그렇다고 VITE_를 붙이면 Recoil이 인식하지 못한다.) 이러한 경우 Recoil에서 제공하는 RecoilEnv를 통해 환경변수를 별도로 설정할 수 있다.

// configs/recoil.ts
import { RecoilEnv } from 'recoil';

RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

// App.tsx
import './configs/recoil';

function App() {
  return (
    <RecoilRoot>
        {/* 생략 */}
    </RecoilRoot>
  );
}

 

 

참고자료

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

[SSR][NextJS] Duplicate atom key during development and during production build in nextjs · Issue #733 · facebookexperimental/