[이슈] Next.js + Recoil - duplicate atom key 오류 해결하기

✍️ 문제

recoil duplicate atom key "{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을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다. key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다.

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

공식가이드

 

💡 해결방법

방법 1)  Recoil에서 제공하는 RecoilEnv를 통해 환경변수 별도로 설정

.env 파일이나 혹은 recoil 설정파일에 추가하면 된다.

나 같은 경우는 .env에 설정할 경우 제대로 적용이 안되서 recoil 설정파일에 추가했다.

// stores/atoms.ts

import { atom, RecoilEnv } from 'recoil';
RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false;

혹은

# .env

process.env.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false

 

방법 2) atom key에 난수 사용

 

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

npm i --save-dev @types/uuid

- 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
});

 

 

참고)

https://velog.io/@sj_dev_js/Recoil-Duplicate-atom-key

https://tesseractjh.tistory.com/310