Next.JS 14 Jotai 사용 시 Detected multiple Jotai instances. 경고

redux 보다 심플하고 편한 jotai

Next.js 14 Jotai latest 버전으로 업데이트 후 아래와 같은 메시지를 마주했다.

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044

원인

Jotai 를 사용하는 다른 Npm을 사용하는 경우 다양한 라이브러리에서 Jotai가 사용되어 생기는 경우일 가능성이 높다.

즉, 여러 Jotai 인스턴스들이 default store에 동시다발적으로 접근하는 경우에 발생하는 이슈.

 

배경

Next JS App router 기반으로 구현하고 별다른 라이브러리는 깔지 않았는데도 이런 이슈가 발생했다.

Root Layout.tsx 에서 jotai atom을 불러와 get, set 처리하는 부분이 문제일까 싶어 하위 컴포넌트단으로 빼봐도 소용이 없었다. 

현 버전에서의 일시적인 버그일 수 도 있겠단 생각이 들었지만, 나는 당장 이 메시지가 안 나오도록 하고 싶었다.

tsconfig.json 내 엄격모드를 끄는것도 방법이지만, 그러고 싶진 않았다. 

 

경고메시지 내 링크에 접속해 글을 읽어보니 한 외국인 개발자가 해결방안을 공유해 이를 공유한다. 

각각에 Provider를 지정하여 스토어를 별도 관리하는게 해결방안이기도 하지만 나는 아래와 같은 방법으로 해결했다.

 

해결

const nextConfig = {
    webpack: (config, _context) => {
      config.resolve.alias['jotai'] = path.resolve(__dirname, 'node_modules/jotai')
      return config;
    },
}