toast-ui.react-image-editor
toast-ui.react-image-editor copied to clipboard
nhn
ReferenceError: window is not defined
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 ?
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.
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!.
the same propblem
can't build React App on NextJS because of window in your js-bundle
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!.
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; }
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!.
@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((((((
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!.