Error: window is not defined

오류내용

ReferenceError: window is not defined
    at new PaypalButton (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-paypal-express-checkout\dist\index.js:90:13)
    at processChild (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3305:14)
    at resolve (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at renderPage (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\render.js:50:851)
    at Object.ctx.renderPage (C:\Users\gmleh\Desktop\react-shoppingmall\front\.next\server\pages\_document.js:862:30)
    at Function.getInitialProps (C:\Users\gmleh\Desktop\react-shoppingmall\front\.next\server\pages\_document.js:299:19)
    at Function.getInitialProps (C:\Users\gmleh\Desktop\react-shoppingmall\front\.next\server\pages\_document.js:870:87)
Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
    at loadGetInitialProps (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\lib\utils.js:5:295)
    at async renderToHTML (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\render.js:50:1107)
    at async C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:81:66
    at async C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:74:142
    at async DevServer.renderToHTMLWithComponents (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:106:365)
    at async DevServer.renderToHTML (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:107:255)
    at async DevServer.renderToHTML (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\server\next-dev-server.js:34:578)
    at async DevServer.render (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:55:236)
    at async Object.fn (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\next-server.js:40:264)
    at async Router.execute (C:\Users\gmleh\Desktop\react-shoppingmall\front\node_modules\next\dist\next-server\server\router.js:23:67)

 

원인

next.js 에서 서버사이드렌더링을 적용할 때 발생하였다.

PayPal 결제모듈에서 이 에러가 발생하였다. 

이는 초기에 next.js에서 웹페이지가 렌더링이 될때는  window가 선언되지 않기 때문에

참조할 수 없어 발생한 문제였다.

 

 

 

해결

Dynamic Import - With no SSR

 

이에 대한 해결책으로 next js 에서 제공하는 Dynamic Import 라는 것을 사용하였다.

Dynamic Import는 정적인 모듈 import를 필요한 시점에 import 할 수 있게 해준다.

즉 필요하지도 않은 모듈을 페이지가 렌더링 할때 import 하는 것이 아니라 

필요할 때 import 하는 것이다. 이는 초기 렌더링시에 성능적으로도 효율적이다.

 

 

import dynamic from 'next/dynamic'
const DynamicPaypalComponent = dynamic(() => import('../components/Paypal'),{ ssr: false })

<DynamicPaypalComponent/>

 

nextjs - Dynamic Import 링크 

https://nextjs.org/docs/advanced-features/dynamic-import