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