• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

안녕하세요 질문드립니다

21.05.07 00:25 작성 조회수 117

0

css ssr 이후로 back서버쪽이나 front 서버쪽 오타나 데이터 타입에러떄문에 에러나면 모두 아래처럼 에러 메시지가 뜨는데 ....모든 에러가 다 이렇게 뜨니깐 에러 해결하기가 너무 힘드네요 ㅠㅠ 

_document.js 파일은 제로초님이랑 동일하고 

MyDocument.getInitialProps() 안에 개체가 들어가야되는데  undefined가 들어가는 이유가 ...

ssr할때 서버에서 완성된 파일을 내려줘서 들어가야되는데 서버에러가 떴을 때 res를 못해주니 저곳에 아무것도 안들어가니깐 저런 에러가 발생하는 걸까요 ? 

그렇다면 _document.js 만들기 전에는 왜 저런 에러가 나지 않았던걸까요 ? 

그리고 혹시 해결방법이 없을까요 ? 

Server Error

Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack
loadGetInitialProps
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/lib/utils.js (5:295)
async renderToHTML
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/render.js (54:1107)
async
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (109:97)
async
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (102:142)
async DevServer.renderToHTMLWithComponents
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (134:387)
async DevServer.renderToHTML
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (135:923)
async DevServer.renderToHTML
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/server/next-dev-server.js (35:578)
async DevServer.render
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (72:236)
async Object.fn
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (56:580)
async Router.execute
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/router.js (23:67)
async DevServer.run
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (66:1042)
async DevServer.handleRequest
file:///C:/Users/jjong/Desktop/jme/front/node_modules/next/dist/next-server/server/next-server.js (34:504)
course-thumbnail

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

사용자 게시글, 해시태그 게시글

강의실 바로가기

답변 4

·

답변을 작성해보세요.

0

jjongrrr님의 프로필

jjongrrr

질문자

2021.05.07

오잉...다시 아래 소스로 붙이니깐 잘 되네요 ...;;;;; 

제로초님 소스 붙여도 똑같길래 안되는 줄 알았는데 ...잘 되네요 ..... 윗댓글에 id password만 가져왔던건 postcard에 nickname[0] 이 없어서 에러가 났던거였네요 

import React from 'react';
import Document, { Html, Head, Main, NextScript } 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();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

0

jjongrrr님의 프로필

jjongrrr

질문자

2021.05.07

프론트나 백에서 에러가 나지 않으면 잘 작동합니다..!

근데 제가 기능 추가하다가 아래처럼 작성했었는데 오류가 나더라구요 ... 이렇게 서버쪽에 에러가 있을 때 저런식으로 뜹니다 
예를 들어 아래처럼 유저모델에 id랑 password만 가져오면 저게 문제라고 에러가 나야되는데 위에 소스처럼 에러가 납니다.

아래 소스는 nickname이나 email을 가져오면 잘 되구요 

include: [{
    model: User,
     attributes: ['id', 'password']
 }

0

jjongrrr님의 프로필

jjongrrr

질문자

2021.05.07

아래입니다!

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {

    // styled components ssr 
    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()}
              </>
            ),
          };
        } catch (error) {
          console.error(error);
        } finally {
          sheet.seal();
        }
      }

    // 아래가 기본꼴. _app.js 위에 _document.js가 있고 여기에 ssr하면 됨. 여기에서 html head body 수정가능
    // https://polyfill.io/  에서 폴리필 체크해서 복사하고 NextScript 얘보다 위에 폴리필 등록
    render() {
        return (
            <Html>
                <Head />
                <body>
                    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

0

조현영님의 프로필

조현영

지식공유자

2021.05.07

_document.js 보여주세요.

이 글과 비슷한 Q&A