tiptap

tiptap copied to clipboard

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?

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

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

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.

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

PR #3533 should fix this issue then.

+1

@bdbch I am still experiencing this bug, I am using tiptap v2.0.3. Any fix or workaround?, It mainly crashes the app when the editor is unmounting or when the user is navigating away from the page containing editor. Can we reopen this issue?

I'm having this as well with 2.0.3

Could you create a replicatable sandbox for us? @Hideman85 @arpit016 so we can verify the issue still exist?

@bdbch Still occurs in 2.0.4 -- here's a code sandbox: https://codesandbox.io/s/github/rbruels/tiptap-3580-sandbox

Moved back to the backlog

For what it's worth, testing locally for us and removing the flushSync call all-together of course stopped the error. Interestingly though through testing a bunch of our custom Nodes and navigating across multiple dynamically re-initialised editors, nothing else seemed to be off.

I assume there is a good reason for using flushSync but it isn't super obvious from the code alone what that is 🤔

Fwiw I've never seen this occur over hundreds of hours building our TipTap/React editor (but mostly using 2.1.0-rc.*.) I wonder what the cause could be.

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

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

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.

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 || []
});

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 😄

FYI: We also struggled with this, but after a bump from 2.0.0-beta.209 to 2.1.13 the issue disappeared 🎉

Still experiencing the error with 2.1.13 or 2.1.16

Putting logic inside queueMicrotask(..) solved perfectly! Thanks.

still getting this in 2.3.0

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

I'm having this problem as well with 2.4.0.

I tried implementing a basic example from the TipTap docs and got the crash as well, the counter here: https://tiptap.dev/docs/editor/guide/node-views/react

Adding the queueMicrotask fix here back in as a patch fixes the issue for me: https://github.com/ueberdosis/tiptap/commit/aa4389883aead90fa16e804c672dc269b9a1292a

Should be resolved with tiptap 2.5 since we no longer have to flushSync anymore

@nperez0111 still facing the same issue with 2.5.9

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

I can confirm it's still present on 2.5.9 as well.

You are using a React nodeview? Or is this with useEditor?

I must've read the issue incorrectly. Tiptap 2.5 fixes useEditor, node views will be resolved with: https://github.com/ueberdosis/tiptap/pull/5273

I don't see this exact issue anymore but I do sometimes still see: Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition PureEditorContent

With useEditor.

I think this only occurs when swapping the editor out for a new one (eg user changes the selected content) but we're not breaking any rules of React or of TipTap as far as I can tell, so I wouldn't expect this.

PureEditorContent is to do with React nodeviews: https://github.com/ueberdosis/tiptap/blob/32ed87b409207897753c65b2e7c44c1a64d3173d/packages/react/src/EditorContent.tsx#L88-L99

So not yet resolved, but will be with https://github.com/ueberdosis/tiptap/pull/5273

Ah apologies. I was pretty sure I'd seen it on a page where we used none, but I'm probably mistaken about that.

This should now be resolved with 2.6.0