글 작성 시 사용한
Nextjs 버전 → 12.1.4
Recoil 버전 → 0.7.2
⚽️ 목표
NextJS + Recoil 개발환경에서 아톰 키 중복 에러가 출력 해결하기위한 짧고도 긴 여정
1. 에러 발생 이유
정확한 에러메시지
•
NextJS에는 페이지개념이 존재함 → Single Page Application인 React 프레임워크 임에도 불구하고
•
개발환경 시 파일이 변경되면 NextJS는 연관된 페이지 파일을 새로 빌드 → 하지만 실행의 주체는 하나의 NodeJS 프로세스
•
원래 존재하는 하나의 NodeJS 프로세스는 atom key가 선언되어 있음 →리빌드 시 이미 존재하는 atom key를 또 생성하려 하기 때문에 출력되는 에러
•
에러 메시지 자체에도 “프로덕션에선 치명적인 에러지만 HMR시 출력되는거면 무시해도 안전하다"라는 소리를...
2. 해결법
•
공식 업데이트 아직 없음 -
•
해당 에러를 표시되지 않게하는 방법은 존재 - 개발환경에서 해당에러 때문에 다른 에러들에 대한 트래킹이 더 어려워지기 때문
npm 모듈 설치
•
intercept-stdout npm 모듈 설치
npm i intercept-stdout
Bash
복사
브라우저 내 에러 무시
•
_app.jsx에 코드 추가
const memoize = (fn) => {
let cache = {};
return (...args) => {
let n = args[0];
if (n in cache) {
return cache[n];
}
else {
let result = fn(n);
cache[n] = result;
return result;
}
}
}
const mutedConsole = memoize((console) => ({
...console,
warn: (...args) => args[0].includes('Duplicate atom key')
? null
: console.warn(...args)
}))
global.console = mutedConsole(global.console);
JavaScript
복사
터미널 내 에러 무시
•
next.config.js에 코드 추가
◦
next.config.js에선... 기본적으론 코드가 트랜스파일이 되지 않는다! → 추가 라이브러리 필요
const intercept = require("intercept-stdout")
// 개발환경에서 Duplicate atom key 에러가 출력될 경우 삭제
function interceptStdout(text) {
if (
process.env.NODE_ENV === "development" &&
text.includes("Duplicate atom key")
) {
return "";
}
return text;
}
// Intercept in dev and prod
intercept(interceptStdout)
JavaScript
복사