📚 Reference

🔖 Index

Expectation Violation: Duplicate atom key

• 참고 자료 1

• 참고 자료 2

• 문제

  Expectation Violation: Duplicate atom key "todoListState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.
  

  • Next.js만의 문제가 아니라 빌드 프로세스에서 JS 파일을 실행하는 Node.js의 단일 프로세스 때문에 본질적으로 동일한 atom이 여러 번 선언된다.
  • 개발 중 파일이 변경되면 Next.js는 해당 페이지 항목 파일을 다시 빌드 한다. 동일한 Node.js의 단일 프로세스이기 때문에 atom은 이미 선언되어 있다.
  • 파일 변경이 전체 파일의 재구축을 트리거하거나 component lifecycle/hook 내에서 atom이 선언되고 해당 항목만 hot-replaced 되는 경우에도 HMR에서 동일한 일이 발생할 수 있다.
  • Next.js 개발 중 파일이 변경되면 다시 빌드 되는 과정에서 atom으로 만든 state가 재선언된다.
  • key는 항상 고유 값을 가져야 하는데 재선언 되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다.
  • Next.js 개발 중 Recoil을 사용할 때 발생하는 고질적인 문제인 거 같다. 기능적으로는 문제가 없다고 한다.

• 해결 방법

  • 방법 1

    • intercept-stdout 모듈을 사용해서 에러 메시지를 무시하는 방법

      1. intercept-stdout 설치

      # npm
      npm i intercept-stdout
      npm i @types/intercept-stdout
      
      # yarn
      yarn add intercept-stdout
      yarn add @types/intercept-stdout
      
      

      2. next.config.js

      /* eslint-disable @typescript-eslint/no-var-requires */
      /** @type {import('next').NextConfig} */
      
      // <https://github.com/facebookexperimental/Recoil/issues/733>
      // <https://github.com/ant-design/ant-design/issues/26136>
      const intercept = require('intercept-stdout');
      const interceptStdout = (text) => {
        if (text.includes('Duplicate atom key')) {
          return '';
        }
        return text;
      };
      
      intercept(interceptStdout);
      

  • 방법 2

    • 난수를 사용해서 에러 메시지가 뜨지 않게 하는 방법

      1. 난수 생성을 해주는 uuid 모듈 설치

      # npm
      npm i uuid
      npm i --save-dev @types/uuid
      
      # yarn
      yarn add uuid
      yarn add @types/uuid
      

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

  새로고침 시 전역 상태가 사라짐

  ---

  • recoil-per