[Food-App] Next.js recoil runtime error

빌드하면서 runtime error가 발생했다. 상태관리를 위해 recoil을 사용했는데 'ReactCurrentDispatcher'에서 문제가 발생했다고 했다. 그래서 다음과 같이 몇가지 조치들을 시도했다.

1. React 버전 충돌: react와 react-dom 버전 때문인지 확인
2. 패키지 설치 문제: node_modules 삭제 후 재설치
3. Webpack 설정 문제: Webpack 확인
4. 캐시 삭제: 캐시 삭제 후 재빌드

1. React 및 React-DOM 버전 확인
npm list react react-dom

2. 의존성 재설치
rm -rf node_modules package-lock.json
npm install

3. Webpack 설정 확인(next.config.js가 정상인지 확인)
npm install next@latest

4. 캐시 삭제 후 재빌드
npm cache clean --force
npm run build

 

하지만 여전히 문제는 해결되지 않았고 여러 사이트들을 뒤지며(?) 내린 결론은 다음과 같다.

 

1. Recoil의 가장 최근 업데이트는 2022년 10월 12일에 이루어졌다는 것
2. 예기치 않은 런타임 에러를 경험 -> 특히 Next.js와 함께 사용할 때 'duplicate atom key' 에러가 자주 발생
Next.js의 재빌드 과정에서 Recoil atom 키가 중복 선언되면서 발생하는 문제

 

결론: zustand로 상태관리 툴을 변경하자!

 

참고 링크

https://github.com/vercel/next.js/issues/66695

Usage of Recoil in Nextjs app (turborepo) induces a TypeError: Cannot destructure property 'ReactCurrentDispatcher. · Issue #66

https://www.reddit.com/r/nextjs/comments/1elgh3b/error_in_recoil_with_react_in_a_nextjs_turbo_repo/

From the nextjs community on Reddit