Getting error in nextjs

[nazmul-bzs]

Hello BlockNote Team, I am using BlockNote in one of my nextjs projects. On the left panel of the page, I have a list of notes and on the right panel, there is Editor. When I click a note title on the left panel, it fetches the content from an API and passes the content to the right panel Editor. But, I got an error when I navigate to a previously selected note. Can you please help me to fix this issue?

I have attached a screenshot, a video and the code of BlockNote component I have used in my project.

https://github.com/user-attachments/assets/e123aa11-93d6-4e17-871d-fb3b1a7a93f4

import { type Block, type PartialBlock } from '@blocknote/core';
import '@blocknote/core/fonts/inter.css';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react';

export type BlockNoteEditorProps = {
    initialContent: PartialBlock[];
    handleChange: (content: Block[]) => void;
};

export const BlockNoteEditor = ({ initialContent, handleChange }: BlockNoteEditorProps): React.ReactNode => {
    const editor = useCreateBlockNote(
        {
            initialContent,
        },
        [initialContent],
    );

    return (
        <div>
            <BlockNoteView
                editor={editor}
                onChange={() => {
                    handleChange(editor.document);
                }}
            />
        </div>
    );
};

export default BlockNoteEditor;

[nazmul-bzs]

Follow up comment

However, waiting for a small amount of time (for example 10 ms) before every re-render the Editor component fix this error. But it would be better if there is any elegant solution approach.

import { type Block, type PartialBlock } from '@blocknote/core';
import '@blocknote/core/fonts/inter.css';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react';
import { memo, useEffect, useState } from 'react';

export type BlockNoteEditorProps = {
    initialContent: PartialBlock[];
    handleChange: (content: Block[]) => void;
};

export const BlockNoteEditor = memo(({ initialContent, handleChange }: BlockNoteEditorProps): React.ReactNode => {
    const [loading, setLoading] = useState(true);

    const editor = useCreateBlockNote(
        {
            initialContent,
        },
        [initialContent],
    );

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 10);
    }, []);

    return (
        <div>
            {!loading && (
                <BlockNoteView
                    editor={editor}
                    onChange={() => {
                        handleChange(editor.document);
                    }}
                />
            )}
        </div>
    );
});

BlockNoteEditor.displayName = 'BlockNoteEditor';

export default BlockNoteEditor;