Using blocknote option initialContent creates a flushSync in console

[edwandr]

Describe the bug
I'm trying to initiate a blocknote with initialContent that features a custom inline (a mention) content using useCreateBlockNote hook. When doing so, it works well but I get an error in console (see screenshot)

It seems to be a tiptap issue that is not really fixed yet : ueberdosis/tiptap#3764

There are partial solutions using microtasks though found by community :

• flushSync gets called on render when the Editor gets updated with content that uses an extension with addNodeView ueberdosis/tiptap#3764 (comment)
• Error: flushSync was called from inside a lifecycle method in <PureEditorContent> ueberdosis/tiptap#3580 (comment)

To Reproduce

• Load this basic reproduction initiating a blocknote with a mention inside : https://stackblitz.com/edit/github-5zwbkwwx?file=App.tsx
• The error will appear in console

Misc

• Node version: 18.20.7
• Package manager: yarn 4.3.0
• Browser: Chrome 134.0.6998.45
• @blocknote : 0.25.1
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[nperez0111]

BlockNote has it's own React rendering, so it is not related to Tiptap.

Luckily, this is being emitted as an error, but React will do the right thing anyway. Let's just keep this issue tracked, but it probably won't be worked on anytime soon, since it is rather complicated to get right.

[YousefED]

Thanks for the report, this must be a regression after #1438 - we'll look into it

[edwandr]

Hello @YousefED, thanks a lot for your fix but I still get the error in my project and in the sandbox I shared : https://stackblitz.com/edit/github-5zwbkwwx?file=App.tsx
Is there something to change in config of the inline content to make your fix apply ?

[YousefED]

the package-lock still has an old blocknote version, please test on the latest

[edwandr]

the package-lock still has an old blocknote version, please test on the latest

You're right I though the "latest" was enough but when I specify the precise 0.26.0 version it does work on the sandbox.
I managed to reproduce the issue I still have on my project by rendering multiple BlockNoteView components (which is my usecase as I use blocknote to write and display messages feed) : https://stackblitz.com/edit/github-5zwbkwwx?file=App.tsx,package.json

[sailxjx]

I still meet this error when using the latest 0.26.0 version

[YousefED]

@edwandr in the example you're displaying the same editor in 3 different views. Don't you want to use 3 different editors?

You're right that in this case the warning gets triggered, but it's a pretty niche scenario I think

[sailxjx]

To add, this issue occurred when I was using the custom block. Only when the document contains one or more custom blocks, the error occurs each time I refresh the page and reload blocknote view.

Console Error


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.

components/workflow/workflow-editor.tsx (229:15) @ PureWorkflowEditor


  227 |             </h1>
  228 |             {editorReady && editorRef.current ? (
> 229 |               <BlockNoteView
      |               ^
  230 |                 editor={editorRef.current}
  231 |                 theme={isDark ? "dark" : "light"}
  232 |                 editable={!readOnly}
Call Stack
60

Show 55 ignore-listed frame(s)
div
<anonymous> (0:0)
PureWorkflowEditor
components/workflow/workflow-editor.tsx (229:15)
PureBlock
components/workflow/block.tsx (641:13)
Chat
components/chat.tsx (227:11)
Page
app/(chat)/page.tsx (78:7)

[edwandr]

@edwandr in the example you're displaying the same editor in 3 different views. Don't you want to use 3 different editors?

You're right that in this case the warning gets triggered, but it's a pretty niche scenario I think

Yes indeed in the sandbox it's three time the same editor but in my app it's different editors (one component for each comments) and I still get the issue.
But when changing the sandbox to create different editors it works so I cannot provide a way to reproduce for now sorry, i'll let you know if I can reproduce on the sandbox

[RobinClowers]

@YousefED I'm also running into this case, we render several different editors on our page at once and also see the flushSync errors. Happy to open a new issue to track if that's easier.

[Will-Bill]

To add, this issue occurred when I was using the custom block. Only when the document contains one or more custom blocks, the error occurs each time I refresh the page and reload blocknote view.

Can confirm this is happening for me with custom blocks. If I remove the custom blocks the error goes away.

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.

[yafkari]

This happens to me because of the second render in dev. Thus when I disable the strict mode, i don't get the warning anymore.

[YousefED]

Will be fixed in #1726