[Error] Page "src/app/~.page.tsx" has an invalid "default" export

문제 원인

현재 프로젝트 진행 중에 서버 API로 요청을 받아 처리하지 않기 때문에,

하드코딩으로 데이터를 임시로 넣어 아래와 같이 처리하고 있었습니다!

interface Event {
  imageSrc: string
  link: string
}

interface EventPageProps {
  list: Event[]
}

const EventTempList = [
  { imageSrc: '/images/sample.jpg', link: '/' },
]

export default function EventPage({ list = EventTempList }: EventPageProps) {
  return (...)
}

 

dev 환경에서 구동했을때는 전혀 오류가 나지 않고 잘 화면이 나왔는데,

docker로 build되는 과정 중 아래와 같이 오류가 발생했습니다.

Type error: Page "src/app/(commerce)/(main)/event/page.tsx" has an invalid "default" export:
Type "EventPageProps" is not valid.

 

결론적으로 위 에러가 발생했던 이유는 page props를 잘못된 타입으로 선언했기 때문입니다.

현재는 pages에 prop으로 받는 값도 없는데! 공통 컴포넌트 작업할 때처럼 props로 받는다고 생각해 처리해버린게 문제였습니다.

 

위 에러가 나는 컴포넌트의 page로 들어가보니 아래 코드에서 빨간줄로 표시되어 오류를 확인할 수 있었습니다.

// Check the prop type of the entry function
checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()

 

오류 메세지는 아래와 같습니다.

// Check the prop type of the entry function
checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()

여기에 'OmitWithTag<EventPageProps, keyof PageProps, "default">' 형식이 '{ [x: string]: never; }' 제약 조건을 만족하지 않습니다.
'list' 속성이 인덱스 시그니처와 호환되지 않습니다.
'Event[]' 형식은 'never' 형식에 할당할 수 없습니다

 

즉, page의 parameter 중 첫번째는 PageProps를 받도록 되어있는데!

제가 갑자기 그 영역에 PageProps가 아닌 EventPageProps를 넣어버렸기 때문에 에러가 난 것입니다.

 

해결 방법

임시 데이터이기 때문에 EventPageProps 자체를 지운 후, 해당 리스트를 상수로 선언해 다시 빌드해 위 문제는 가볍게 해결하였습니다~!

 

깨닫고 나니 아, 아예 잘못 생각한거였네! 하고 깨닫게 되었지만, 고민하는 동안은 도대체 뭐가 문제야? 싶었던 간단한 이슈 기록입니다 🤭