ReferenceError: window is not defined

kandarppatel commented 4 years ago

We are trying to use this module with our React SSR (Server Side Rendering) project and its keep giving us below error.

ReferenceError: window is not defined
at Object.<anonymous> (/var/www/app/node_modules/tui-image-editor/dist/tui-image-editor.js:16:4)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Module._compile (/var/www/app/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Object.newLoader [as .js] (/var/www/apcrat/admin/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at Module.Hook._require.Module.require (/usr/local/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:70:39)

We have tried different solutions suggested online by setting window as global or conditioning in componentDidMount life cycle method but non of them working.

Is there any work around for this ?

ravenaxiom commented 4 years ago

I had to force the component to render client side to fix this problem - although it only solves it intermittently. I think the issue is something to do with the image editor trying to hook into the window object, which wouldn't be available until the code runs client side.

swtalk commented 4 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-07-31T16:01:59

        * 메일 제목 :

Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

Opty1712 commented 3 years ago

the same propblem can't build React App on NextJS because of window in your js-bundle

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-12-10T21:23:05

        * 메일 제목 :

Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

Logeshdas commented 3 years ago

Next.js is universal, which means it executes code in the server-side first, then client-side. The window object is only present client-side, so it throws error like window is not defined. The below solution will overcome this error.

let ImageEditor;

import dynamic from 'next/dynamic'; if (typeof window !== 'undefined') { ImageEditor = dynamic(() => import('@toast-ui/react-image-editor'),{ ssr: false }) }

export default function App(){ return ImageEditor; }

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-12-22T17:37:06

        * 메일 제목 :

Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

Opty1712 commented 3 years ago

@Logeshdas

thank you, but I know it https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Anyway it doesn't solve my problem, because I want make some unit tests on NodeJS and it's impossible with window budled inside((((((

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-12-22T20:52:17

        * 메일 제목 :

Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

nhn / toast-ui.react-image-editor

ReferenceError: window is not defined #24