build 에러 Error occurred prerendering page
2021
작성한 질문수 7
Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: document is not defined
at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980)
at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146)
at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049)
at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464
at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902)
at JSON.parse (<anonymous>)
at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770)
at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155)
✓ Generating static pages (5/5)
> Export encountered errors on following paths:
/newpost/page: /newpost

npm run build시에 발생하는 에러입니다.
각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다..
gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데
잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다.
"use client";
import React, { ChangeEventHandler, useState } from "react";
import LexicalEditor from "@/app/newpost/LexicalEditor";
function Page({ props }: any) {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => {
setTitle(e.target.value);
};
const onSubmit = (e: any) => {
e.preventDefault();
console.log("제목 : ", title);
console.log("내용 : ", content);
};
return (
<form className="postForm" onSubmit={onSubmit}>
<div className="postForm__titleInputSection">
<input
className="postForm__titleInput"
type="text"
name="title"
value={title}
onChange={onChangeTitle}
placeholder={"제목을 입력하세요."}
/>
</div>
<div className="postForm__editorWrapper">
<LexicalEditor />
</div>
<button>작성하기</button>
</form>
);
}
export default Page;
깃허브 링크 입니다.
https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx
답변 2
0
일단 어떤 코드에서 에러나는지를 확인해야 해서 newpost/page.tsx를 엄청 간단하게 만들어보세요.
function Page() {
return <div>페이지</div>
}
export default Page;
이런 식으로요. 여기서 빌드 성공하면 한 줄씩 넣어보면서 언제부터 에러가 나는지 보면 됩니다.
0
at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980)
여기가 가리키는 코드가 뭔가요?
0
찾아보니 숨김폴더로 있긴합니다.. 두개의 파일이 있는데
https://cherry-pantydraco-d54.notion.site/next-server-app-58ba9c2de2a24d73b452e66b696b3c3c?pvs=4
너무길어서 일단 노션으로 링크 만들어서 공유드립니다!
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2





