개발환경

• Next.js 13, TypeScript,
• Vercel을 통하여 배포.

이슈 상황 설명

2023.09.22, 어제 업데이트 한 거라곤 README 밖에 없었는데, 갑자기 웹 서버에서 500 에러가 떴다.

문제를 확인하기 위해 vercel의 log를 봤는데 로그로 다음과 같은 에러 메세지가 떴다.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /var/task/my-app/node_modules/react-dom/package.json

실패한 방법

1. re-deploy를 했으나 효과가 없었다.

2. react-dom의 package.json 쪽에 문제가 생긴 것 같아 살펴봤지만, 공식 문서와 비교해도 차이가 없었다. 애초에 react-dom 18.2.0엔server.edge라는 건 존재하지도 않았다.

3. README를 업데이트 한 이후로 이런 에러가 발생했으니, 혹시 몰라서 README를 업데이트하기 전으로 git revert를 했다. 그러나 여전히 같은 에러가 발생했다.
   ➡️ 이를 통해서, 확실하게 내 코드가 문제가 있는 게 아니라는 것을 알게 되었다. (애초에 로컬 서버에서는 문제가 없었으니, 내 코드의 문제가 아니었지만 말이다.)

4. process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = "next" 또는 "experimental"로 설정하라는 해결법을 찾았으나, 내 프로젝트에 해당되는 방법은 아니었다.
   이 방법은 custom request handler + standalone + appdir을 사용하는 경우에 해당되는 방법이었다.

• 참고자료1: https://zenn.dev/mmmpa/articles/64e368f6f656dd#index.js

• 참고자료2: https://github.com/vercel/next.js/issues/48964

성공한 방법

정확하게 뭔지는 모르겠지만, 무언가의 버전이 업그레이드 되면서 생긴 문제라고 생각했다.

그래서 아예 내 프로젝트에 쓰고 있는 패키지 모두를 업그레이드를 해봤다.

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

그랬더니 Next.js 버전이 13.4.XX에서 13.5.2로 바뀐 걸 확인했다.
(React와 React-dom의 버전은 아마 변함이 거의 없었을 것이다.)

그리고 다시 배포했더니, 500 에러가 해결되었다.

그래서 원인은?

아마 vercel 버전 업그레이드가 되면서 무언가의 불일치로 문제가 있었던 것 같다.

같은 문제에 관해서 환경 변수에서 VERCEL_CLI_VERSION"="vercel@32.2.5로 설정했더니 해결했다는 케이스가 있다.

참고 자료: https://github.com/vercel/vercel/issues/10564

마무리

어제 에러를 해결해서 기뻤지만, 이런 에러는 앞으로 안 봤으면 좋겠다.
이 이슈의 원인이 나한테 있지 않고, 외부에 있다보니, 내가 주체적으로 해결할 수 없음에 약간의 씁쓸함을 느꼈다.