npm run build 시 에러가 발생합니다.
584
작성자 없음
投稿した質問数 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
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 에러 디코더 링크를 통해 구체적인 오류 메시지를 확인하세요.
이와 관련하여 유사한 질문과 답변이 있는 링크를 소개합니다:
위의 방법들이 문제 해결에 도움이 되길 바랍니다. 추가적인 질문이 있으시면, 디버깅 진행 상황과 함께 질문을 남겨주세요. 곧 지식공유자께서도 답변해 주실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
27
2
모달 관련 질문
0
32
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
61
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
92
3
vercel 배포를 실패하였습니다.
0
96
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
55
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
85
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
85
2
백엔드 서버 오류납니다.
0
80
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
75
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
108
1
서버 배포 에러입니다.
1
98
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2