Using `BlockNoteViewRaw` throws `SideMenu` error

[TheMikeyRoss]

Describe the bug I'm trying to use BlockNoteViewRaw and I keep getting the following error:

TypeError: Cannot read properties of undefined (reading 'SideMenu')

To Reproduce https://stackblitz.com/edit/github-h6gx3y?file=App.tsx

You'll have to open the browser console to see the error

Misc

• Node version: v18.20.3
• Package manager: pnpm
• Browser: Chrome

[YousefED]

BlockNoteViewRaw expects a ComponentsContext to be available. Also see the other implementations: https://github.com/TypeCellOS/BlockNote/blob/c9a53bb9bd79c3b1990f74d2c87956c3cf5949b0/packages/ariakit/src/index.tsx#L99

[TheMikeyRoss]

Oh I see, I'm a little confused about the @blacknote/mantine package. What If I want to use a headless version with zero styles, do I still have to import the mantine package? wouldn't that add some extra size since it's bringing mantine with it?

[YousefED]

Oh I see, I'm a little confused about the @blacknote/mantine package. What If I want to use a headless version with zero styles, do I still have to import the mantine package? wouldn't that add some extra size since it's bringing mantine with it?

blocknote/mantine uses the Mantine UI to implement a UI, so by definition it's not headless. Depending on your definition of headless / what you're looking for exactly, you can:

• use BlockNoteViewRaw and @blocknote/react and build your own UI library on top of this, you'd need to build your own UI components similar to @blocknote/mantine, @blocknote/shadcn, @blocknote/ariakit do
• use @blocknote/ariakit as the UI component library that's most bare-boned (all styling is done in a single CSS file which you can completely customize / remove to your liking

[TheMikeyRoss]

Ah thanks @YousefED I think @blocknote/ariakit is what I'm kinda looking for