Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot fix SSR issue with editorKey prop

See original GitHub issue

Do you want to request a feature or report a bug? Report a bug.

What is the current behavior? Causes bag with data-offset-key:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) " data-offset-key="egvuv-0-0" data-react
 (server) " data-offset-key="enh8p-0-0" data-react

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/. Just draft-js with SSR. Cannot provide jsfiffle because of it doesn’t have SSR (or has?).

What is the expected behavior? SSR without reuse markup errors.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? 0.10.1

Issue Analytics

State:
Created 6 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

17reactions

flarniecommented, Sep 23, 2017

@mxstbr I was able to reproduce the issue, and I think the reason is that the empty EditorState is being created fresh on the server, and then created fresh again on the client.

There is an example of SSR in our github repo, and it carefully uses the same data for the empty EditorState on both server on client - https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/universal

I think that if the block keys are different, Draft will think they are different content and re-render, even though you and I know they are both just a block with an empty string.

We could try to force Draft to avoid re-rendering and merge the block keys if their text and entity data is the same. I would rather not because it adds complexity, and because you have another solution: this seems solvable if you create a reusable emptyContentState like in the example.

Hope that is helpful!

3reactions

mxstbrcommented, Sep 24, 2017

Ohh that makes total sense, sorry for the false alarm. Thank you so much for digging into this @flarnie, much much appreciated!

Top Results From Across the Web

Server-Side Rendering (SSR) - Vue.js

In the server request handler, render the HTML with the correct client-side asset links and optimal resource hints. We may also need to...

Using Non-SSR Friendly Components with Next.js

You can use the ssr: false object to disable server-side rendering of your dynamically imported component, as shown below. import dynamic from 'next/dynamic'...

Inline Toolbar - DraftJS Plugins

In this editor a toolbar shows up once you select part of the text …

Next js app with SSR is not pre-rendering HTML, so web ...

I have a next.js app that uses server side rendering. When running the application both locally and in production (on vercel edge), the...

Best practices to increase the speed for Next.js apps

Server-side rendering (SSR) is a technique used to render the initial ... an object that will be passed to the page component as...