ReferenceError: window is not defined

[kandarppatel]

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]

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]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-07-31T16:01:59 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.

[Opty1712]

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

[swtalk]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-12-10T21:23:05 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.

[Logeshdas]

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]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-12-22T17:37:06 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.

[Opty1712]

@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]

Dooray! 메일 발송 실패 안내 메일 발송 실패 안내 박시우([email protected]) 님께 보낸 메일이 전송되지 못하였습니다. 실패 사유를 확인해보세요. * 받는 사람 :  박시우([email protected]) * 발송 시간 :  2020-12-22T20:52:17 * 메일 제목 :  Re: [nhn/toast-ui.react-image-editor] ReferenceError: window is not defined (#24) * 실패 사유 :  받는 사람이 회원님의 메일을 수신차단 하였습니다. 이 메일은 발신전용으로 회신되지 않습니다. 더 궁금하신 사항은 [email protected] 으로 문의해 주시기 바랍니다. © Dooray!.