“Block Side Menu" CSS breaks down. bug

[musoukun]

When I set up blocknote with Vite following the tutorial, the CSS breaks down. In particular, the Sidemenu becomes completely unusable. Is there any way to fix this?

vite v5.2.6 react 18.2.0

[BloodBoy21]

same problem here, I'm using next 14.1.0 and tailwindcss 3.3.0

[TrinhCamMinh]

The solution is to install Mantine by typing this

npm install @mantine/core

Then you can import the maintine core stylecss to your project

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

Hope this works for you 😊

[YousefED]

Hi! This should be fixed in the latest release

[ShaquibKhanhub]

Hi! This should be fixed in the latest release

I'm also getting the same error which says TypeError: Cannot read properties of undefined (reading 'SideMenu') and this is notion-clone hope you know about this project so basically i did everthing to counter this error but im still getting this same error entire code inside editor.ts "use client"; import as Button from "@/components/ui/button" import as DropdownMenu from "@/components/ui/dropdown-menu" import as Command from "@/components/ui/command" import as Input from "@/components/ui/input" import as Label from "@/components/ui/label" import as Popover from "@/components/ui/popover" import as Dialog from "@/components/ui/dialog" import as Skeleton from "@/components/ui/skeleton"

import { BlockNoteEditor, PartialBlock } from "@blocknote/core"; import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/core/style.css"; import '@mantine/core/styles.css'; import { useTheme } from "next-themes"; import { useEdgeStore } from "@/lib/edgestore";

interface EditorProps { onChange: (value: string) => void; initialContent?: string; editable?: boolean; }

const Editor = ({ onChange, initialContent, editable }: EditorProps) => { const { resolvedTheme } = useTheme(); const { edgestore } = useEdgeStore();

const handleUpload = async (file: File) => { const res = await edgestore.publicFiles.upload({ file, });

return res.url;

};

const editor: BlockNoteEditor = useCreateBlockNote({ editable, initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined, uploadFile: handleUpload, });

// Update your onChange handler according to the expected signature const handleEditorChange = () => { onChange(JSON.stringify(editor.document, null, 2)); };

return (

); };

export default Editor;

[matthewlipski]

I don't think this is related to the closed issue, but if you're using ShadCN, you should import BlockNoteView from @blocknote/shadcn and styles from @blocknote/shadcn/style.css. If you still get the same error, comment out the shadCNComponents prop.

[ShaquibKhanhub]

Thank you @matthewlipski but it's already been resolve.