SSR

[TrejGun]

thanks for this lib, looks really good how ever it can't be rendered on server. I mean i dont need to render image editor itself, it may render empty space but now it just crashes with error

 ~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:1828
     var nav = window.navigator;
            ^
 ReferenceError: window is not defined
     at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:1828:12)
     at __webpack_require__ (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:36:30)
     at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:94:17)
     at __webpack_require__ (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:36:30)
     at util (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:56:18)
     at ~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:59:10
     at webpackUniversalModuleDefinition (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:9:20)
     at Object.<anonymous> (~/node_modules/tui-code-snippet/dist/tui-code-snippet.js:16:3)
     at Module._compile (internal/modules/cjs/loader.js:701:30)
     at Module._extensions..js (internal/modules/cjs/loader.js:712:10)

[fachryansyah]

@TrejGun i'm getting error similar like these, how do you solve it ?

[TrejGun]

i did not :)

[budiadiono]

I have resolved this issue by using loadable-components (https://github.com/gregberge/loadable-components). The trick is to load the image editor on the browser only -- when component is rendered on the server then load the blank component instead.

Here's the trick:

// ./image-editor
//

import loadable from '@loadable/component'

export const ImageEditor = loadable(
  process.browser
    ? () => import('./image-editor-raw')
    : () => import('./blank')
)

// ./image-editor-raw
//

import TuiImageEditor from '@toast-ui/react-image-editor'
import React from 'react'
import { imageEditorTheme } from './image-editor-theme'

export default function ImageEditorRaw() {
  return (
    <div>
      <TuiImageEditor
        includeUI={{
          theme: imageEditorTheme,
          menu: ['shape', 'filter'],
          initMenu: 'filter',
          uiSize: {
            width: '1000px',
            height: '700px'
          },
          menuBarPosition: 'bottom'
        }}
        cssMaxHeight={500}
        cssMaxWidth={700}
        selectionStyle={{
          cornerSize: 20,
          rotatingPointOffset: 70
        }}
        usageStatistics={true}
      />
    </div>
  )
}

// ./blank
//

import React from 'react'

export default function Blank() {
  return <div />
}

Hope this helps :)

[swtalk]

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

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

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

        * 받는 사람 : 

박시우(viewrain@nhn.com)

        * 발송 시간 : 

2020-08-02T16:45:01

        * 메일 제목 : 

Re: [nhn/toast-ui.react-image-editor] SSR (#2)

            * 실패 사유 : 

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

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

    © Dooray!.