인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 질문드립니다
작성
·
196
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)
답변 4
0
jjongrrr
질문자
오잉...다시 아래 소스로 붙이니깐 잘 되네요 ...;;;;;
제로초님 소스 붙여도 똑같길래 안되는 줄 알았는데 ...잘 되네요 ..... 윗댓글에 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
질문자
프론트나 백에서 에러가 나지 않으면 잘 작동합니다..!
근데 제가 기능 추가하다가 아래처럼 작성했었는데 오류가 나더라구요 ... 이렇게 서버쪽에 에러가 있을 때 저런식으로 뜹니다
예를 들어 아래처럼 유저모델에 id랑 password만 가져오면 저게 문제라고 에러가 나야되는데 위에 소스처럼 에러가 납니다.
아래 소스는 nickname이나 email을 가져오면 잘 되구요
include: [{
model: User,
attributes: ['id', 'password']
}
0
jjongrrr
질문자
아래입니다!
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
