Recoil_ Duplicate atom key

에러 상황

Expectation Violation: Duplicate atom key "".

Next.js 개발 중 업데이트 과정에서 (Hot Module Replacement) recoil의 atom으로 만든 state가 재선언된다.
이 과정에서 state의 key는 고유값을 가져야 하는데 전에 선언된 key값을 사용하면서 중복 에러가 발생.

공식 홈페이지에서는 기능적으로 문제는 없다고 한다.

해결_

1. interrupt-stdout모듈을 이용해 에러메세지를 무시
2. @types/uuid 모듈을 이용해 중복 피하기.

1. interrupt-stdout모듈
_터미널

npm i -D next-intercept-stdout

_next.config.js

/** @type {import('next').NextConfig} */
const withInterceptStdout = require("next-intercept-stdout");

const nextConfig = {
  reactStrictMode: false,
};

module.exports = withInterceptStdout(nextConfig, (text) =>
  text.includes("Duplicate atom key") ? "" : text,
);

2. @types/uuid 모듈
_터미널

npm i --save-dev @types/uuid

_recoil 폴더

import type {RecoilState} from 'recoil'
import { v1 } from "uuid";
import { atom } from 'recoil'

const UserWarehouseId: RecoilState<number> = atom<number>({
	key: `warehouseId${v1}`,
	default: 0
})

const LoadingState: RecoilState<boolean> = atom<boolean>({
	key: `loadingStatus${v1}`,
	default: false
})

export {LoadingState,UserWarehouseId}

_출처
https://github.com/facebookexperimental/Recoil/issues/733
https://www.useonglee.dev/blog/5%EC%9B%94-%EC%82%AC%EC%9D%B4%EB%93%9C%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%97%90%EB%9F%AC-%EC%A0%95%EB%A6%AC
https://velog.io/@sj_dev_js/Recoil-Duplicate-atom-key