facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.57k stars 2.64k forks source link

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

Open CommerceOwl opened 5 years ago

CommerceOwl commented 5 years ago

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

pavel-lens commented 5 years ago

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 commented 5 years ago

Thanks @svitekpavel! Working for me as well.

MBach commented 5 years ago

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

pavel-lens commented 5 years ago

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.