안녕하세요 Element type is invalid 관련 에러 문의드립니다.

Question

강의 잘 듣고 있습니다. 여쭤보려고 하는데 별도로 기획중인 프로젝트에 SNS관련 기능을 넣을 생각으로 강의를 참고하면서 만들고 있는데요. 랜딩페이지를 서비스소개 페이지로 만들면서 강의내용을 main 페이지부터 시작하게끔 만들려고 합니다. 꾸미는 것 때문에 styled component를 활용해서 랜딩페이지를 만들었는데 _index.js에서 Element type is invalid라는 오류가 생성되는데 해결방법이 혹시 있나 해서요 ㅠ https://github.com/Sehwanjun/NextPus 첫  페이지(localhost:3000)은 보여지는데 localhost:3000/main (강의에선 localhost:3000과 같은 페이지) 로 들어가려니 에러가 나네요 강의 외적인 부분인것 같아 질문드리기 죄송하지만 너무 답답해서 문의드립니다. 부탁드립니다.

PaPillOn빠삐용 · Answer

아 해결됐습니다. 골치아프게 해서 죄송합니다! ㅠㅠ

PaPillOn빠삐용 · Answer

네네 //각 페이지들의 공통되는 요소 처리 import React from " react "; import PropTypes from " prop-types "; import " antd/dist/antd.css "; //Next에서 Head 수정할 수 있는 모듈 import Head from " next/head "; import { createGlobalStyle , ThemeProvider } from " styled-components "; const GlobalStyle = createGlobalStyle ` body { margin : 0 ; padding : 0 ; box-sizing : border-box ; } ` ; const theme = { colors : { primary : " #0070f3 " , }, }; //component: index.js의 return 부분(index.js의 부모인 셈) const App = ({ Component , pageProps }) => { return ( <> < GlobalStyle /> < Head > < meta charSet = " utf-8 " /> < title > NextPus < ThemeProvider theme = { theme } > < Component { ... pageProps } /> ) ; }; App . propTypes = { Component : PropTypes . elementType . isRequired , }; export default App ;

제로초(조현영) · Answer

_app.js도 만들어져있는 상태인가요??

PaPillOn빠삐용 · Answer

(15:42)는 아래의 줄에서 .getInitialProps 부분을 가리키고 const   initialProps   =   await  Document . getInitialProps (ctx) ; (91:33)은   pages\_document.tsx내에서 찾는 것 같은데 _document.tsx라는 파일이 원래 없어서 그런지 아무것도 가리키지 않는다고 생각했습니다. 그런데 말씀하신 git 링크따라서 내용을 _document.js에 넣어 보았더니 이렇게 나오네요. 자꾸 시간뺏어서 죄송합니다.ㅠㅠ 감사합니다!

제로초(조현영) · Answer

오타를 찾지는 못했습니다. 여기 이미지에서 pages\_document.tsx(91:33)이랑 (15:42) 오른쪽 링크 아이콘 눌러서 어떤 부분 가리키는지 확인하실 수 있나요? 그리고 https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/_document.js 처럼 render까지 작성해보세요.

PaPillOn빠삐용 · Answer

아 스타일드 컴포넌트 반영하려면 _document.js에 내용 입력해야한다고 해서 파일 생성해서 만들었었거든요. 거기서 문제가 생긴 것 같습니다. pages/_document.js import Document from " next/document "; import { ServerStyleSheet } from " styled-components "; export default class MyDocument extends Document { static async getInitialProps ( ctx ) { const sheet = new ServerStyleSheet () ; const originalRenderPage = ctx . renderPage ; try { ctx . renderPage = () => originalRenderPage ( { enhanceApp : App => props => sheet . collectStyles ( < App { ... props } /> ) , } ) ; const initialProps = await Document . getInitialProps (ctx) ; return { ... initialProps , styles : ( <> { initialProps . styles } { sheet . getStyleElement () } ) , }; } finally { sheet . seal () ; } } }

PaPillOn빠삐용 · Answer

네네ㅠㅠ https://github.com/Sehwanjun/NextPus main.js import React from " react "; import MainLayout from " ../components/MainLayout "; const Main = ({ Component }) => { return ( < MainLayout > < div > 헬로 < Component /> ) ; }; export default Main ;

제로초(조현영) · Answer

main.js 파일 만드신건가요?