[Next.js] TypeError: jsxDEV is not a function 해결 방법 (캐시 에러)

// 에러 로그
⨯ Internal error: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. digest: "3212179931"

TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a function

 

잘 동작하던 프로젝트에서, 특별한 변경사항이 없는데

TypeError: jsxDEV is not a function 에러가 발생했습니다.

 

특이한 점은, 빌드가 성공되고 배포까지 정상적으로 이루어지는 상황이었는데요.

꼭 연휴 전에 이슈사항이 터집니다 🤔

 

코드에서 특별한 변경사항이 없었으니,

로컬 환경에서만 발생한다는 점을 통해 문제의 원인을 추측했습니다.

 

다행히 node_modules 재설치를 통해 간단히 해결할 수 있었습니다. 😎

 

---

📝 해결방법

 

⦁ 의존성 패키지 (node_modules) 재설치

rm -rf node_modules
rm package-lock.json # 또는 yarn.lock
npm install # 또는 yarn install

 

✔ 문제를 해결하는 과정은 생각보다 간단합니다.

node_modules 폴더와 lock 파일을 삭제한 뒤, 의존성을 다시 설치하면 됩니다.

이 방법은 간단하지만 각종 패키지의 충돌을 해결하거나 손상된 설치 파일을 복구하는 데 효과적입니다.

 

⦁ Next.js 빌드 캐시 제거 & 생성

// 빌드 캐시 제거
rm -rf .next

// 프로젝트 재실행
npm run dev / yarn run dev

 

✔ Next.js 디렉토리 내의 캐시 파일이 손상된 경우에도 각종 에러를 발생시킬 수 있습니다.

패키지 변경사항이 발생했을 경우 웬만하면 Next의 빌드 캐시를 제거하고

프로젝트를 다시 실행하는 것을 추천드립니다.

 

생각보다 빌드파일 문제로 꼬이는 경우가 많더라구요🥲

---

 

---

 

 

Node.js 생태계에서 의존성 문제는 항상 빈번하게 일어나는데요,

간단하지만 생각보다 효과적인 1차적인 디버깅으로

의존성 재설치 추천드립니다. 😀

 

만약 해결되지 않는다면

2차 디버깅은  package.json 파일과

잘 동작하는 yarn.lock 파일을

잘 분석해서 의존성 문제를 해결하는 것이겠죠.

 

이건 쉽지 않은 일이지만

패키지 업데이트가 활발한 npm 생태계에서

빈번하게 발생하므로 화이팅입니다.. 😌

 

---

---

참고 문헌 :