Breaking Error when starting to type inside the editor. Cannot update a component (`HotReload`) while rendering a different component (`qr`)

[vincenzodomina]

Describe the bug Breaking Error when starting to type inside the editor. It immediately focuses away after the first letter and when I open the block menu and click on any item it errors:

app-index.tsx:25 Warning: Cannot update a component (HotReload) while rendering a different component (qr). To locate the bad setState() call inside qr, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack at qr (blocknote-react.js:2401:1) at div () at Xr (blocknote-react.js:2479:1) at si (blocknote-react.js:2831:1) at div () at fi (blocknote-react.js:2888:19) at mi (blocknote-react.js:2929:1) at MantineThemeProvider (MantineThemeProvider.tsx:18:3) at MantineProvider (MantineProvider.tsx:14:3) at on (blocknote-mantine.js:1635:11) at div ()

I had v.015.11 running with this issue, upgraded to 0.17.0 and still existing issue.

EDIT: There are more errors following the above error, might be a cascading effect but maybe helps:

Here is the script within blocknote/core where this is coming from I added the conditional chaining which lets the error disappear, but the focusing away problem persists

To Reproduce

• Open editor in the app, either blank or prefilled
• Start typing, first letter appears but it focuses away on its own
• Then when starting a command and clicking on any item in the menu list, the app breaks and the above errors appear
• The same error when clicking any item in the context menu from the block plus sign

Misc "@blocknote/core": "^0.17.0", "@blocknote/mantine": "^0.17.0", "@blocknote/react": "^0.17.0", Node version: 20.12.2 Package manager: npm Browser: Chrome latest React: Nextjs 14.1.4 App router

[vincenzodomina]

I created a minimal example with my next.js setup and so far it works: https://stackblitz.com/edit/github-m4y9eq?file=components%2FEditorComponent.tsx

EDIT: Turns out that the (recommended use with next.js)[https://github.com/TypeCellOS/BlockNote/blob/8867e6411d6e698e667b7ac22697bcf76f763937/docs/pages/docs/advanced/nextjs.mdx#L3] works just fine and resolved my above issues.

It seems that my way of initializing the const editor = BlockNoteEditor.create() instead of the recommended way of const editor = useCreateBlockNote() was causing the issues with the next.js prerendering. I remember ending up there because the recommended hook did not work a while ago, but now its the other way around. And strangely it still works in a Webcontainer in my minimal example above.

So can be closed