[Recoil] Next.js에서 Recoil 에러처리

Duplicate atom key Waring

동작에는 문제가 없지만 사실 next.js console에서는 Warning을 출력하고 있습니다.

저도 참 애를 먹는 작업이였는데 이 방법을 알고나니 간단하게 해결되었습니다.

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

이는 SSR이라서 여러면 atom을 생성하면서 경고 메시지가 출력되는 것입니다.
현재 공식 이슈로 open 되어 있습니다. 수정까지는 시간이 꽤 걸릴 수 있으니 경고 창을 보고 싶지 않다! 라면 우회 방법을 알려드리도록 하겠습니다.

우회 방법

1. node_modules/recoil 의 디렉터리에서 모든 recoil.js 파일의 registerNode 함수를 찾습니다.
2. 해당 함수를 잘 보시면 위에서 출력되는 경고 메시지를 출력해주는 함수입니다. console.warn 부분을 주석하면 더 이상 출력되지 않습니다.

비동기 작업은 어떻게?

import { atom, selector } from 'recoil'
import axios from 'axios'

export const pageNameState = atom({
  key: 'pageNameState',
  default: '',
})

export const getNameSelector = selector({
  key: 'getNameSelector',
  get: async () => {
    const res = await axios.get('http://localhost:3000/api/hello')
    return res.data
  },
})

 

빌드 시 경고 창

한번 npm run build 으로 build를 해보시겟어요? 또 경고가 출력됩니다.

build 시점에 selector 에서 호출하는 api가 정상이 아니면 에러가 발생합니다.

 

우리는 next.js의 api를 사용하고 있기 때문에 build 시점에 next.js server가 내려가 있으니 api에 호출에 실패에서 발생하는 메시지 입니다.

아래와 같이 해당 부분을 trycatch으로 묶는다면 catch에 걸리는 것을 확인할 수 있습니다.

 

결론적으로 경고 메시지가 출력되어도, catch에 걸리더라도 구어진 정적파일은 문제가 없으며 next.js server가 실행했을 때 정상적으로 동작합니다.

selector get부분에 api EndPoint를 next.js 내부 api 말고 build 시점에 살아있는 api으로 호출한다면 경고 메시지 없이 빌드 되는 것을 확인할 수 있습니다.