export 관련 에러가 발생한 것 같은데 그 원인을 모르겠습니다ㅠ
섹션 1의 template.tsx, Link, Image, redirect 강의를 따라하던 도중 에러가 발생한 부분이 있어서 질문드립니다.
현재 src\app\page.tsx 의 코드는 다음과 같습니다
이렇게 작성하고 계정 만들기를 클릭해 보았더니 http://localhost:3000/i/flow/signup 으로 이동은 하지만,
다음과 같은 에러가 발생했습니다
Unhandled Runtime Error
Error: The default export is not a React Component in page: "/i/flow/signup"
Call Stack
re
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7243)
async
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7935)
async re
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7704)
async
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:18470)
에러 메세지를 보면 async 관련 에러인가 싶어서 봤는데 현재 async 는 사용된 부분이 없었고,
The default export is not a React Component in page라는 문구 자체가 export 관련 문제인 것 같아서 찾아보니 export default를 하지 않아서 그렇다는 글이 많았는데 현재 코드에서는 export default가 제대로 작성되어 있어서 원인을 모르겠네요ㅠ
현재 제 폴더구조와 src\app\(beforeLogin)\i\flow\signup\page.tsx의 컴포넌트는 다음과 같습니다
📦(beforeLogin)
┣ 📂i
┃ ┗ 📂flow
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📂signup
┃ ┃ ┃ ┗ 📜page.tsx
┣ 📂login
┃ ┗ 📜page.tsx
┗ 📜layout.tsximport Link from 'next/link';
export default function Signup() { return <div></div>; }
혹시 몰라서 버전 정보도 같이 첨부합니다
답변 1
0
혹시 저기 말고도 다른데 i/flow/signup 폴더가 있는 것 아닌가요?
.next 폴더 캐시 문제일수도있으니 이것도 지우고 다시 실행해보세요
0
안녕하세요! 답변 달아주셔서 감사합니다
우선 i/flow/signup 폴더가 중복되거나 위치에 문제가 있는것은 아닙니다ㅠ
📦src
┗ 📂app
┃ ┣ 📂(afterLogin)
┃ ┃ ┣ 📂compose
┃ ┃ ┃ ┗ 📂tweet
┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂explore
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂messages
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂search
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂[username]
┃ ┃ ┃ ┣ 📂status
┃ ┃ ┃ ┃ ┗ 📂[id]
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📂(beforeLogin)
┃ ┃ ┣ 📂i
┃ ┃ ┃ ┗ 📂flow
┃ ┃ ┃ ┃ ┣ 📂login
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┃ ┃ ┗ 📂signup
┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜page.tsx
┃ ┃ ┗ 📜layout.tsx
┃ ┣ 📜favicon.ico
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┣ 📜not-found.tsx
┃ ┣ 📜page.module.css
┃ ┗ 📜page.tsx
.next 캐시도 지우고 실행했더니 에러트레이스 찍힌 내용은 조금 바뀌긴 했지만 동일한 에러가 발생하네요..
Unhandled Runtime Error
Error: The default export is not a React Component in page: "/i/flow/signup"
Call Stack
re
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7243)
processTicksAndRejections
node:internal/process/task_queues (95:5)
runNextTicks
node:internal/process/task_queues (64:3)
process.processTimers
node:internal/timers (509:9)
async
file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:10206)
0
오 저 폴더 아이콘 어떻게하신건가요??
이게 .next 폴더 안에서 조금 뒤져보면 각 페이지가 어떻게 컴파일되었는지 나옵니다. 그것도 다른 페이지랑 한 번 비교해보세요. 오타같긴한데 잘 안보이네요
0
오 해결했습니다!
알고보니, (beforeLogin)에 작성했었던 `layout.tsx`에 `return {children}` 을 해주지 않고 있었네요ㅠ
삽질을 많이 했었는데 이번 기회에 제대로 알아가네요 감사합니다!
+)
폴더 아이콘은 file-tree-generator 라는 VSCode익스텐션으로 캡처한 다음 여기에 복붙한것입니다!
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
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
108
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
84
2