tiptap: Error: flushSync was called from inside a lifecycle method in

What’s the bug you are facing?

The component import { EditorContent } from "@tiptap/react" is crashing for some reason.

I’m getting the following error in console:

Uncaught Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.
    at flushSync (react-dom.development.js:21917:1)
    at PureEditorContent.maybeFlushSync (EditorContent.tsx:82:1)
    at PureEditorContent.removeRenderer (EditorContent.tsx:100:1)
    at ReactRenderer.destroy (ReactRenderer.tsx:93:1)
    at ReactNodeView.destroy (ReactNodeViewRenderer.tsx:173:1)
...

More specifically here:

The above error occurred in the <PureEditorContent> component:
    in PureEditorContent
    in PureEditorContent (at TipTap.js:154)
    in div (at TipTap.js:145)
...

Reduced code:

const TipTap = ({ editor, ...props }) => {
  return (
    <div className="tip-tap-editor-container text-editor">
      <EditorContent className="tip-tap-editor-content mt-5" editor={editor} />
    </div>
  )
}

If I remove the <EditorContent> the app doesn’t crash.

Not sure if this bug is only related to our implementation. Anyway, any help, clue or information is welcome in order to fix this issue which is urgent.

Which browser was this experienced in? Are any special extensions installed?

Google Chrome Version 108.0.5359.124 (Official Build) (arm64)

macOs ventura 13.1

How can we reproduce the bug on our side?

Not sure.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Not crashing.

Anything to add? (optional)

Tip-tap package versions:

{
    "@tiptap/extension-color": "^2.0.0-beta.209",
    "@tiptap/extension-highlight": "^2.0.0-beta.209",
    "@tiptap/extension-image": "^2.0.0-beta.209",
    "@tiptap/extension-link": "^2.0.0-beta.209",
    "@tiptap/extension-placeholder": "^2.0.0-beta.209",
    "@tiptap/extension-text-style": "^2.0.0-beta.209",
    "@tiptap/extension-underline": "^2.0.0-beta.209",
    "@tiptap/react": "^2.0.0-beta.209",
    "@tiptap/starter-kit": "^2.0.0-beta.209",
}

React version: 16.13.1 Node version: v14.19.1

You can find the entire log here: tiptap.log

Note: my app depends of this node version only

Did you update your dependencies?

Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

Yes, I’m a sponsor. 💖

About this issue

Original URL
State: open
Created 2 years ago
Comments: 21 (4 by maintainers)

Most upvoted comments

We are running into this as well for the same reason as @philipaarseth (imperatively updating content in a useEffect).

Since we depend on updating content within an effect like this, I found that wrapping the offending setContent inside a queueMicrotask also makes the error go away… but watching this issue for a proper fix 😄

+10

essmahr on Sep 13, 2023

Still experiencing the error with 2.1.13 or 2.1.16

ccreusat on Jan 18, 2024

still getting this in 2.3.0

fridaystreet on Apr 25, 2024

In my situation, I was experiencing poor performance and lag as the number of lines in a Paragraph node with a NodeView increased. This significantly impacted the user experience during text input. However, when I changed the maybeFlushSync(fn: () => void) method from:

if (this.initialized) {
  flushSync(fn);
} else {
  fn();
}

to:

if (this.initialized) {
  fn();
} else {
  fn();
}

The lag and performance issues were resolved. I am just not sure what potential risks this change might introduce.

dwzkit on Aug 28, 2023

Same here. Still not fixed in 2.30 and my console is just getting flooded in the flushSync errors.

rfdrake27 on Apr 27, 2024

Experienced this after updating from 2.0.0-beta.220 to 2.1.7. Seems to have been caused by using setContent inside a useEffect. Moving the initialize editor content to useEditor({ content: content seem to have fixed it for me.

offending code inside useEffect:

editor?.commands?.setContent({
  type: "doc",
  content: doc?.content || []
});

philipaarseth on Sep 3, 2023

Ah I didn’t realize the issue was specific to ReactNodeViewRenderer rather than useEditor/EditorContent. We don’t use ReactNodeViewRenderer, so I guess that explains never seeing it.

Relink to the relevant code sandbox for convenience: https://codesandbox.io/s/github/rbruels/tiptap-3580-sandbox

Nantris on Aug 12, 2023

@Slapbox Feel free to check my code sandbox — see if you can reproduce too. Maybe you’ll have an idea why it’s happening

rbruels on Aug 12, 2023

There is a PR addressing this issue: https://github.com/ueberdosis/tiptap/pull/3533

kolyagora on Dec 29, 2022

I’m also experiencing the same errors after an update from 2.0.0-beta.202 to 2.0.0-beta.209.

From a real quick search, it looks like #3331 may be the only changes related to this error between the 2 versions.

HiDeoo on Dec 28, 2022