flushSync was called from inside a lifecycle method issues

[wasauce]

Hello!

We are on the startup plan and running into some issues related to the our tiptap documents rendering. This is the core issue: #3580 which you will see is marked resolved a while ago... yet we have the issue today.

We are using tiptap 2.9.1

See a screenshot from the console and a video showing the issue.

video:

Screen.Recording.2024-11-05.at.08.41.14.mp4

As you can see in the video - first load, we see the error in the console but everything renders. Then on refresh, the content does not load.

Any guidance on what we are doing wrong?

Thank you in advance for your help!

[nperez0111]

You would need to share code to help you in any sort of way.
But, from the looks of it. It seems like you are trying to do SSR which will not work with the editor

[TravelC]

@nperez0111 thanks for the reply, we're using nextjs 13.1.1 with pages, will that be an issue in this case?
The issue only appears when I set the editor's content include node views(react), it's ok with others for example paragraph.
The content is fetched from the server and then set, but I tested even set with local data, still having issue:

const [scratchpadDoc, dispatchScratchpadDoc] = useAtom(scratchpadAtom);

const editor = useEditor({
        extensions: [
            ...ScratchpadExtensions,
            Placeholder.configure({
                placeholder: () => {
                    return "Write something";
                },
                showOnlyCurrent: false,
            }),
        ],
        immediatelyRender: false,
        onUpdate() {
            debouncedSave();
        },
    });

useEffect(() => {
        if (!editor) {
            return;
        }
        if (!previousContent && scratchpadDoc && "doc" in scratchpadDoc) {
            // Defer the editor update to the next microtask
            Promise.resolve().then(() => {
                let doc = scratchpadDoc.doc as JSONContent;
                editor?.commands.setContent(doc);
            });
        }
        setScratchpadEditor(editor);
    }, [
        editor,
        scratchpadDoc,
    ]);

[nperez0111]

You should not be setting the content of the editor like that. You are probably both re rendering the editor component and attempting to set its content. Do not try to use the editor as a "controlled" component. The editor is the source of truth not your state

[TravelC]

thank you for this, I will review my code based on it.

[TravelC]

Sharing what I've found: In my node views, I have some hooks, they will trigger re-renders after the view mounted, I think that caused the flushSync was called from inside a lifecycle method issue, so I created a delay component:

import { useEffect, useState } from "react";

export const Delayed = (props: any) => {
    const { children, delay, fallback } = props;
    const [isShown, setIsShown] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            setIsShown(true);
        }, delay);
    }, [delay]);

    return isShown ? children : fallback;
};

and delay the render of the complex component:

export const ActionItemsWithDelay = (props: any) => {
    return (
        <NodeViewWrapper>
            <Delayed delay={100} fallback={<div>Loading...</div>}>
                <ActionItems {...props} />
            </Delayed>
        </NodeViewWrapper>
    );
};

And now the issue is gone.

Sharing as this may help others and happy to have feedbacks if any. @nperez0111

[spacerrsdreams]

Interesting I have the same issue with NodeViewWrapper where I have shadcn's popover component.

import { NodeViewWrapper } from "@tiptap/react";
import type { NodeViewProps } from "@tiptap/react";
import { BookOpen, ExternalLink, Link, Trash2, X } from "lucide-react";
import { useCallback, useState } from "react";

import type { CitationMarkAttributes } from "@/components/page/text-editor/extensions/citation-mark/citation-mark.extension";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export const CitationMarkComponent = ({ node, editor, getPos }: NodeViewProps) => {
  const [open, setOpen] = useState(false);

  const { citationId, text, citationData, isLinked } = node.attrs as CitationMarkAttributes;

  const handleLink = useCallback(() => {
    // Use queueMicrotask to defer both state and editor updates
    // This prevents flushSync errors from Radix UI Popover
    queueMicrotask(() => {
      setOpen(false);
      queueMicrotask(() => {
        editor.commands.linkCitation?.(citationId);
      });
    });
  }, [editor, citationId]);

  const handleUnlink = useCallback(() => {
    queueMicrotask(() => {
      setOpen(false);
      queueMicrotask(() => {
        editor.commands.unlinkCitation?.(citationId);
      });
    });
  }, [editor, citationId]);

  const handleRemove = useCallback(() => {
    queueMicrotask(() => {
      setOpen(false);
      queueMicrotask(() => {
        editor.commands.removeCitation?.(citationId);
      });
    });
  }, [editor, citationId]);

  const handleTriggerClick = useCallback((e: React.MouseEvent) => {
    // Prevent text selection and bubble menu from opening
    e.preventDefault();
    e.stopPropagation();
    setOpen((prev) => !prev);
  }, []);

  const handleOpenChange = useCallback((newOpen: boolean) => {
    // Use queueMicrotask to prevent flushSync errors
    queueMicrotask(() => {
      setOpen(newOpen);
    });
  }, []);

  const handleOpenExternalLink = useCallback(() => {
    if (citationData?.url) {
      window.open(citationData.url, "_blank");
    }
  }, [citationData]);

  return (
    <NodeViewWrapper as="span" className="inline" contentEditable={false}>
      <Popover open={open} onOpenChange={handleOpenChange} modal={false}>
        <PopoverTrigger asChild>
          <span
            className={`
              cursor-pointer rounded-md transition-all duration-200 px-0.5 
              ${isLinked ? "underline decoration-yellow-500 decoration-solid decoration-2 underline-offset-2" : ""}
              bg-yellow-500/30 hover:bg-yellow-500/50
            `}
            onClick={handleTriggerClick}
            onMouseDown={(e) => e.preventDefault()}
          >
            {text}
          </span>
        </PopoverTrigger>
        <PopoverContent
          sideOffset={8}
          className="bg-sidebar text-popover-foreground w-96 rounded-sm"
          side="bottom"
          align="start"
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="bg-yellow-500/20 rounded-sm p-1">
                  <BookOpen className="text-yellow-600 dark:text-yellow-400 size-4 shrink-0" />
                </div>
                <h4 className="text-foreground truncate text-base font-medium leading-5">Citation</h4>
              </div>
              <div className="flex items-center gap-1">
                {citationData?.url && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 w-6 cursor-pointer p-0"
                    onClick={handleOpenExternalLink}
                    title="Open citation source"
                  >
                    <ExternalLink className="size-3.5" />
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 w-6 cursor-pointer p-0"
                  onClick={() => queueMicrotask(() => setOpen(false))}
                  title="Close"
                >
                  <X className="size-3.5" />
                </Button>
              </div>
            </div>

            {citationData && (
              <>
                <div className="space-y-2">
                  <div>
                    <h5 className="text-foreground text-sm font-semibold line-clamp-2">{citationData.title}</h5>
                    {citationData.authors && (
                      <p className="text-muted-foreground text-xs mt-0.5">{citationData.authors}</p>
                    )}
                    {citationData.venue && citationData.year && (
                      <p className="text-muted-foreground text-xs">
                        {citationData.venue} ({citationData.year})
                      </p>
                    )}
                  </div>

                  {citationData.abstract && (
                    <p className="text-muted-foreground text-xs line-clamp-3">{citationData.abstract}</p>
                  )}

                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    {citationData.citationCount > 0 && (
                      <span>{citationData.citationCount.toLocaleString()} citations</span>
                    )}
                    {citationData.influentialCitationCount > 0 && (
                      <span>• {citationData.influentialCitationCount} influential</span>
                    )}
                  </div>
                </div>

                <div className="flex justify-end gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-destructive hover:text-destructive cursor-pointer text-xs"
                    onClick={handleRemove}
                  >
                    <Trash2 className="mr-1.5 size-3" />
                    Ignore
                  </Button>
                  {isLinked ? (
                    <Button variant="outline" size="sm" className="cursor-pointer text-xs" onClick={handleUnlink}>
                      <Link className="mr-1.5 size-3" />
                      Unlink
                    </Button>
                  ) : (
                    <Button variant="default" size="sm" className="cursor-pointer text-xs" onClick={handleLink}>
                      <Link className="mr-1.5 size-3" />
                      Link
                    </Button>
                  )}
                </div>
              </>
            )}

            {!citationData && (
              <div className="space-y-2">
                <p className="text-muted-foreground text-xs">No citation data available</p>
                <div className="flex justify-end gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-destructive hover:text-destructive cursor-pointer text-xs"
                    onClick={handleRemove}
                  >
                    <Trash2 className="mr-1.5 size-3" />
                    Ignore
                  </Button>
                  {isLinked ? (
                    <Button variant="outline" size="sm" className="cursor-pointer text-xs" onClick={handleUnlink}>
                      <Link className="mr-1.5 size-3" />
                      Unlink
                    </Button>
                  ) : (
                    <Button variant="default" size="sm" className="cursor-pointer text-xs" onClick={handleLink}>
                      <Link className="mr-1.5 size-3" />
                      Link
                    </Button>
                  )}
                </div>
              </div>
            )}
          </div>
        </PopoverContent>
      </Popover>
    </NodeViewWrapper>
  );
};

[halfninja]

I'm getting this error and I've boiled it down to a combination of three circumstances:

• I have a Node extension with a ReactNodeViewRenderer based node view
• There's an instance of this node in the initial content
• The EditorContent is not initially rendered, but appears later

I know that last point is not ideal but it's because it's being rendered into an iframe via react-frame-component. I tested rendering into a portal generally, and those are fine, and I reproduced it without an iframe but a delayed render, so it's the delayed conditional render rather than anything to do with iframes or portals.

I'm going to try working around it by creating the editor with no content, and setting it once it's initialised.

React 18.3.1, TipTap 3.13.0

[halfninja]

I managed to work around it to set the content just after the editor view is mounted:

• Defined a MountListener component using useEffect and accepting an onMounted callback
• Wrapped the EditorContent in that, within the iframe
• In onMounted, call setContent within queueMicrotask

If anything else like this happens I'll probably start again in Vue 😅