인프런 커뮤니티 질문&답변

PaPillOn빠삐용

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

반응형 그리드 사용하기.

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

해결된 질문

작성

429

강의 잘 듣고 있습니다.

여쭤보려고 하는데

별도로 기획중인 프로젝트에 SNS관련 기능을 넣을 생각으로 강의를 참고하면서 만들고 있는데요.

랜딩페이지를 서비스소개 페이지로 만들면서 강의내용을 main 페이지부터 시작하게끔 만들려고 합니다.

꾸미는 것 때문에 styled component를 활용해서 랜딩페이지를 만들었는데 _index.js에서 Element type is invalid라는 오류가 생성되는데 해결방법이 혹시 있나 해서요 ㅠ

https://github.com/Sehwanjun/NextPus

첫 페이지(localhost:3000)은 보여지는데

localhost:3000/main (강의에선 localhost:3000과 같은 페이지) 로 들어가려니 에러가 나네요

강의 외적인 부분인것 같아 질문드리기 죄송하지만 너무 답답해서 문의드립니다. 부탁드립니다.

react express nodejs redux Next.js

답변 8

PaPillOn빠삐용

질문자

아 해결됐습니다.

골치아프게 해서 죄송합니다! ㅠㅠ

PaPillOn빠삐용

질문자

네네

//각 페이지들의 공통되는 요소 처리
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</title>
      </Head>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
};

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
};

export default App;

제로초(조현영)

지식공유자

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

PaPillOn빠삐용

질문자

(15:42)는 아래의 줄에서 .getInitialProps 부분을 가리키고

const initialProps = await Document.getInitialProps(ctx);

(91:33)은

pages\_document.tsx내에서 찾는 것 같은데 _document.tsx라는 파일이 원래 없어서 그런지 아무것도 가리키지 않는다고 생각했습니다.

그런데 말씀하신 git 링크따라서 내용을 _document.js에 넣어 보았더니

이렇게 나오네요.

자꾸 시간뺏어서 죄송합니다.ㅠㅠ

감사합니다!

제로초(조현영)

지식공유자

오타를 찾지는 못했습니다.

여기 이미지에서 pages\_document.tsx(91:33)이랑 (15:42) 오른쪽 링크 아이콘 눌러서 어떤 부분 가리키는지 확인하실 수 있나요?

그리고

https://github.com/ZeroCho/react-nodebird/blob/master/ch7/front/pages/_document.js

처럼 render까지 작성해보세요.

PaPillOn빠삐용

질문자

아 스타일드 컴포넌트 반영하려면 _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빠삐용

질문자

네네ㅠㅠ

https://github.com/Sehwanjun/NextPus

main.js

import React from "react";
import MainLayout from "../components/MainLayout";



const Main = ({ Component }) => {
  return (
    <MainLayout>
      <div>헬로</div>
      <Component />
    </MainLayout>
  );
};

export default Main;

제로초(조현영)

지식공유자

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

PaPillOn빠삐용

작성한 질문수

전체 Q&A

질문하기