The above error occurred in the <Tooltip> component

[Maxx59]

Description

I'm new to Platejs, I followed Fixed Toolbar in the Platejs documentation (https://platejs.org/docs/components/fixed-toolbar).

Here is my code :

import { Plate, PlateContent } from '@udecode/plate-common';

import { Editor } from '@/components/plate-ui/editor';

import React, { useRef } from 'react';
import { cn } from '@udecode/cn';
import { CommentsProvider } from '@udecode/plate-comments';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
 
// import { commentsUsers, myUserId } from '@/lib/plate/comments';
const commentsUsers = {
    1: {
      id: '1',
      name: 'zbeyens',
      avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',
    },
  };
   
const myUserId = '1';

import { MENTIONABLES } from '@/lib/plate/mentionables';
import { plugins } from '@/lib/plate/plugins';
import { CommentsPopover } from '@/components/plate-ui/comments-popover';
import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';
import { MentionCombobox } from '@/components/plate-ui/mention-combobox';

export function CreateProject(){
    const containerRef = useRef(null);

    const initialValue = [
        {
          id: '1',
          type: ELEMENT_PARAGRAPH,
          children: [{ text: 'Hello, World!' }],
        },
    ];

    return (
        <div className='h-screen w-1/2 mx-auto mt-20 bg-slate-50'>
            <DndProvider backend={HTML5Backend}>
                <CommentsProvider users={commentsUsers} myUserId={myUserId}>
                    <Plate 
                        plugins={plugins}
                        initialValue={initialValue}
                    >
                        <div
                            ref={containerRef}
                            className={cn(
                                'relative',
                                // Block selection
                                '[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
                            )}
                        >
                            <FixedToolbar>
                                <FixedToolbarButtons />
                            </FixedToolbar>

                            <Editor 
                                className="px-[96px] py-16"
                                autoFocus
                                focusRing={false}
                                variant="ghost"
                                size="md"
                            />

                            <FloatingToolbar>
                                <FloatingToolbarButtons />
                            </FloatingToolbar>

                            <MentionCombobox items={MENTIONABLES} />

                            <CommentsPopover />

                            <CursorOverlay containerRef={containerRef} />
                        </div>
                    </Plate>
                </CommentsProvider>
            </DndProvider>
        </div>
    )
}

I get this error :

The above error occurred in the component:

at $a093c7e1ec25a057$export$28c660c63b792dea (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=32a51597:116:11)
at ExtendComponent (http://localhost:5173/src/components/plate-ui/tooltip.tsx:35:32)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13
at http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:629:11
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:170:11
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:1020:11
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:616:11)
at $6cc32821e9371a1c$export$d9b273488cd8ce6f (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:112:11)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at $d08ef79370b62062$export$e44a253a59704894 (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:984:11)
at InsertDropdownMenu (http://localhost:5173/src/components/plate-ui/insert-dropdown-menu.tsx:142:18)
at div
at div
at _c6 (http://localhost:5173/src/components/plate-ui/toolbar.tsx:164:46)
at div
at div
at FixedToolbarButtons (http://localhost:5173/src/components/plate-ui/fixed-toolbar-buttons.tsx:34:20)
at div
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:54:11
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11
at http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:41:13
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at CollectionProvider (http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:27:13)
at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:43:18
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-toolbar.js?v=32a51597:245:11
at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17)
at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17)
at div
at PlateEffects (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23561:18)
at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3)
at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20
at PlateInner (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23566:26)
at Plate (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23645:15)
at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3)
at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20
at DndProvider2 (http://localhost:5173/node_modules/.vite/deps/react-dnd.js?v=32a51597:1527:9)
at div
at CreateProject (http://localhost:5173/src/components/CreateProject.tsx?t=1710700009760:45:24)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3548:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3983:5)
at Router (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3926:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:4666:5)
at ThemeProvider (http://localhost:5173/src/components/theme-provider.tsx:27:3)
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

If I remove

<FixedToolbar>
    <FixedToolbarButtons />
</FixedToolbar>

from my code, I no longer get the error, it appears but without the toolbar. So it must come from this block of code, but I don't know why or how to solve it.

Environment

• slate: "^0.102.0"
• slate-react: "^0.102.0"
• browser: chrome

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified