Draft-js: Using SSR with Next.js: TypeError: undefined is not an object (evaluating 'editorState.getBlockTree(anchorBlockKey).getIn')

[CommerceOwl]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When using server side rendering, Rich Text example ( https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/rich ) throws this error when pressing enter and at other times.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

1. Use Next.js to setup SSR.
2. Create a component called RichText from example here ( https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/rich )
3. When page refreshes from server using next.js development server, start typing in the rich text editor and hit enter.
4. You'll see these errors appear multiple times.

What is the expected behavior?
Not to have errors in the browser console.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Draft.js version: 0.10.28
Browser: Chrome 71 & Safari 12.0.3
OS: Mac OS: 10.14.3
Not sure if this worked in previous version of Draft.js

[svitekpavel]

This is a problem with server-side rendering. Not sure about the reason, but you can work around this by rendering the editor only on client side.

import dynamic from 'next/dynamic';
const NoSSREditor = dynamic(() => import('../components/Editor'), { ssr: false });

render() {
  return <NoSSREditor .... />
}

Works for me.

[BrodaNoel]

Thanks @svitekpavel! Working for me as well.

[MBach]

Hi @svitekpavel
I've tried your solution but unfortunately, I have an infinite loop when I'm starting my server. My memory is getting consumed very fast, and I cannot render a single page, until the server crashes.

Windows 10 x64 - 16 GB of RAM
Node.JS 12.8.0
Next.JS 9.0.3
Draft 0.11.0

[svitekpavel]

Hi @svitekpavel
I've tried your solution but unfortunately, I have an infinite loop when I'm starting my server. My memory is getting consumed very fast, and I cannot render a single page, until the server crashes.

The rendering should not be called on server, so my best guess is that something else is wrong. Try to revert changes and get the server running normally. Then again try to change it.