인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
npm run build 시 에러가 발생합니다.
해결된 질문
작성
·
68
0
npm run dev로 실행 시 정상 실행되고있고
npm run build 시 아래와 같이 에러가 발생하고있습니다.
제 소스코드는 아래에서 확인가능합니다
https://github.com/redinbluesky/section02
=========npm run build 시 에러 메시지========
D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02>npm run build
> section02@0.1.0 build
> next build
▲ Next.js 14.2.18
./src/components/book-item.tsx
.......................................................
✓ Linting and checking validity of types
Creating an optimized production build ...
✓ Compiled successfully
✓ Collecting page data
Generating static pages (0/7) [ ]인덱스 페이지
Generating static pages (2/7) [= ]Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Z (D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490)
........................................................
Error occurred prerendering page "/lib/fetch-bo.............................
Error occurred prerendering page "/lib/fetch-rendom-books". Read more: https://nextjs.org/docs/messages/prerender-error
.......................................
Error occurred prerendering page "/lib/fetch-one-book". Read more: https://nextjs.org/docs/messages/prerender-error
..........................................
✓ Generating static pages (7/7)
> Export encountered errors on following paths:
/lib/fetch-books
/lib/fetch-one-book
/lib/fetch-rendom-books
답변 3
1
0
0
안녕하세요, 인프런 AI 인턴입니다. Park YongCheon님.
npm run build 실행 시 발생하는 오류는 보통 빌드 과정에서의 데이터 페칭이나 컴포넌트 렌더링 과정에서 발생하는 이슈 때문에 나타날 수 있습니다. 제공해주신 에러 메시지 내용과 GitHub 링크를 통해 몇 가지 해결 방안을 제시해 드리겠습니다.
문제의 원인
비동기 데이터 페칭: Next.js에서
getStaticProps또는getServerSideProps내의 비동기 함수가 프리렌더링 중 문제를 일으킬 수 있습니다. 모든 데이터 페칭 함수에서await가 제대로 사용되고 있는지 확인해 보세요.컴포넌트 내 비동기 코드: 컴포넌트 내에서 비동기 코드를 직접 실행할 경우, 특히 빌드 시점을 고려하지 않고
Promise객체를 반환할 때 이런 문제가 발생할 수 있습니다.React Minified Error #31: 이는 보통 개발 환경의 오류를 말하는 것으로, 일반적으로 심각한 문제는 아닙니다. 하지만, 개발 환경에서 사용할 수 있는
NODE_ENV=development설정으로 변경하여 보다 명확한 오류 메시지를 확인할 수 있습니다.
해결 방법
데이터 페칭 코드 점검:
fetch-book과 관련된 에러가 발생하는 것 같으므로,/lib/fetch-book.ts파일을 점검하여 모든 비동기가 올바르게 처리되는지 확인합니다.
개발 환경에서의 오류 확인:
- 개발 환경에서
npm run build대신next build --debug명령어를 사용해 보다 구체적인 오류를 디버깅합니다.
- 개발 환경에서
내부 서버 요청 확인:
- 내부 API 호출이 올바르게 동작하는지 확인해보세요. 내부 API 요청에서 발생할 수 있는 타임아웃이나 네트워크 오류가 있는지를 점검합니다.
- 내부 API 호출이 올바르게 동작하는지 확인해보세요. 내부 API 요청에서 발생할 수 있는 타임아웃이나 네트워크 오류가 있는지를 점검합니다.
React 에러 코드 디코더 사용:
- 제공된 React 에러 디코더 링크를 통해 구체적인 오류 메시지를 확인하세요.
- 제공된 React 에러 디코더 링크를 통해 구체적인 오류 메시지를 확인하세요.
이와 관련하여 유사한 질문과 답변이 있는 링크를 소개합니다:
위의 방법들이 문제 해결에 도움이 되길 바랍니다. 추가적인 질문이 있으시면, 디버깅 진행 상황과 함께 질문을 남겨주세요. 곧 지식공유자께서도 답변해 주실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.