React-draft-wysiwyg: install on react ssr

[pedromguerra]

I always get this error: client.js:21 Uncaught TypeError: Cannot read property 'getIn' of undefined
after trying to run the editor on server side render react.

what I need to do to run the editor on ssr?

thanks

[jpuri]

@pedromguerra , can you plz share the whole stack trace here.

[jakerobers]

I believe I am getting something similar -- I am using NextJS.

react-dom.development.js:240 Uncaught TypeError: Cannot read property 'getIn' of undefined
    at getUpdatedSelectionState (getUpdatedSelectionState.js:33)
    at getDraftEditorSelectionWithNodes (getDraftEditorSelectionWithNodes.js:35)
    at getDraftEditorSelection (getDraftEditorSelection.js:33)
    at editOnSelect (editOnSelect.js:31)
    at DraftEditor.react.js:216
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:466)

The error triggers every time I type in the editor. Though, the WYSIWYG editor still displays the values as typed.

[jpuri]

It seems that issue is coming while getting selection, that requires DOM it seems.

[jakerobers]

A little more context:

On load, I get

warning.js:33 Warning: Prop `data-offset-key` did not match. Server: "2h08u-0-0" Client: "8vpol-0-0"

So

editorState.getBlockTree(anchorBlockKey)

I believe it expects anchorBlockKey to be 8vpol

but anchorBlockKey is actually 2h08u.

[jakerobers]

The solution that I have come up with is to set a flag on componentDidMount and only render the editor after the component has been mounted client side. I believe this is a sufficient work-around.

Also see: https://github.com/facebook/draft-js/pull/796

We can close the issue since this probably has to be addressed in draft-js

[jelenajjo]

@jakerobers I am having the same issue, can you please share code example how you solved it? I am not sure that I understand how to solve it from your description. It would mean a lot!

[erikmueller]

@jelenajjo taken from https://github.com/facebook/draft-js/issues/385#issuecomment-266552300

something like:

constructor(props) {
  super(props)
  this.state = {
    editor: false,
  }
}

// Once component mounts, enable editor
componentDidMount() {
  this.setState({
    editor: true
  })
}

render() {
  const { editor } = this.state
  return (
    <div className="someComponent">
      { editor
        ? <DraftEditor />          
        : null
      }
    </div>
  )
}

[KubaZachacz]

@erikmueller thanks! Works like a charm with Next.js

[pdandradeb]

It didn't work for me (I'm also using Next.js). I end up using dynamic importing as suggested here:

import dynamic from 'next/dynamic'
const Editor = dynamic(() =>
  import('react-draft-wysiwyg').then(mod => mod.Editor)
)

[thicodes]

@pdandradeb Nice! I tried with dynamic, but i got this error: "Window is not defined"
I passed ssr: false and work fine

const Editor = dynamic(
  () => {
    return import('react-draft-wysiwyg').then((mod) => mod.Editor);
  },
  { loading: () => null, ssr: false },
);

[devwhatoplay]

Module parse failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
|
| var Editor = dynamic(function () {

return import("react-draft-wysiwyg").then(function (mod) {
| return mod.Editor;
| });`

I applied the code above but still getting this error

[nagayev]

@thicodes Thanks a lot!