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.

slate-react 0.62.0+ - Crash if initial render's root node is not the document (reakit Portal)

See original GitHub issue

Description Since the change in slate v0.62.0 from this PR, the editor will cause a crash if the root node for it’s initial render is not the document. Version 0.61.3 does not have this issue.

Notably, this happens if trying to use the slate editor in conjunction with the reakit Portal, or a similarly built component. Right now, the latest version of slate’s editor does not work with the reakit Portal out of the box and trying to use them together causes a crash. In essence the problem is that if for some reason a component renders the editor before it is a child of the document, then it causes a crash.

Recording Shouldn’t be needed, open sandbox to see error.

Sandbox https://codesandbox.io/s/slate-reproduction-reakit-portal-fk002

Steps To reproduce the behavior:

Click on either the “Toggle Basic Portal” or “Toggle Reakit Portal” buttons.
See Unable to find DocumentOrShadowRoot for editor element: [object HTMLDivElement] error.
If you change the versions of slate and slate-react back to 0.61.3, then there is no error when you click either button.

Expectation Ideally there would be no error thrown, similar to how it worked in previous versions. I’m not exactly sure what this error is trying to protect against though, so it may be needed. Any insight on the purpose of the thrown error though would be appreciated!

Environment

Slate Version: [e.g. 0.59] 0.62.0+
Operating System: [e.g. iOS] Mac
Browser: [e.g. Chrome, Safari] Chrome, Firefox, Safari

Context The sandbox includes a simplified version of the reakit portal implementation to hopefully make it a bit easier to debug and see what is going on. Basically, the portal is created using createPortal and then appended to the document after that. So, for the initial render it’s root node is not the document and then the error is thrown causing a crash.

This issue can be worked around by delaying the rendering of the slate editor inside of the Portal until it’s finished mounting completely for anyone that does encounter something similar.