패키지를 업데이트하거나 Yarn.lock을 변경한 후 NextJS API 호출은 개발 환경에서 정상적으로 작동하지만 프로덕션 환경에서는 실패합니다.

Question

어떤 이유로 패키지를 업데이트하거나 Yarn.lock을 다시 조정한 후 내 NextJS(Vercel에서 호스팅됨)에 대한 API 호출이 프로덕션에서 실패합니다. 모든 API 호출(단순한 Hello World라도)은 인덱스 파일과 유사한 HTML을 반환합니다. 이 문제를 일으키는 패키지는 클라이언트 UI 라이브러리인 Mantine을 업데이트하는 것입니다. 그러나 모든 패키지를 특정 버전 번호로 잠그고 Yarn.lock이 전혀 변경되지 않는 경우에도 이 문제가 발생한다는 것을 알았습니다.

Vercel 로그에 표시되는 오류입니다. 하지만 Memberstack은 클라이언트 패키지이고 인증 관리를 담당하기 때문에 실제로 도움이 되지 않습니다. 그리고 저는 이 패키지를 클라이언트 페이지에서만 사용합니다.

으아악

package.json 파일은 다음과 같습니다.

으아악

yarn.lock을 제거하고 모든 패키지를 다시 설치해 보았지만 이로 인해 프로덕션에서 API 호출에도 오류가 발생했습니다. 작동하는 유일한 방법은 이전에 프로덕션에서 작업했던 동일한 Yarn.lock 파일을 직접 복사하여 배포할 때 사용하는 것입니다.

그래서 기본적으로 Yarn.lock 파일을 건드릴 수 없거나, 제작 환경을 깨뜨리거나, 특정 패키지만 건드릴 수 있습니다.

설치한 패키지에 문제가 있는지 확인하려고 합니다. 패키지를 설치/업그레이드할 때 Yarn에서 수행해야 할 작업이 있나요? 아니면 NextJS와 내가 사용하는 일부 패키지 간의 호환성 문제인가요?

Answer 1

는 /var/task/node_modules/@memberstack/dom/lib/methods/index.js:45:5 正试图访问 window처럼 보이지만 NextJS는 서버 측 렌더링(SSR)을 수행하므로 정의되지 않았을 가능성이 높습니다.

window를 호출하기 전에 typeof window === undefined를 추가하거나, Memberstack을 가져올 때 NextJS의 동적 패키지를 사용하고 SSR을 비활성화하는 것이 좋습니다.