Next.js Discord

Discord Forum

tiptap types problem

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP

11 Replies

Northeast Congo LionOP
tiptap next.js
Northeast Congo LionOP
??
Northeast Congo LionOP
Internal React error: Expected static flag was missing. Please notify the React team.
const MenuBar = ({ editor }: {editor: Editor | null}) => {
  if (!editor) {
    return null
  }

  const editorState = useEditorState({
    editor,
    selector: menuBarStateSelector,
  })
but when i change condition to be after hook
i get error
TypeError: Cannot read properties of null (reading 'isActive')
src/components/MenuBarState.ts (11:24) @ isActive

   9 |   return {
  10 |     // Text formatting
> 11 |     isBold: ctx.editor.isActive('bold') ?? false,
'use client'

import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'
import type { Editor } from '@tiptap/core'
import { Bold, Italic, Strikethrough, List, ListOrdered, Undo, Redo } from 'lucide-react'
import { menuBarStateSelector } from './MenuBarState'

const MenuBar = ({ editor }: {editor: Editor | null}) => {
  const editorState = useEditorState({
    editor,
    selector: menuBarStateSelector,
  })

  if (!editor) {
    return null
  }

  return (
    <div className="control-group tiptap-menu pt-3 pb-2 px-1 border-b border-grey-500">
      <div className="button-group">
        <button
          type="button"
          onClick={() => editor.chain().focus().undo().run()} 
          className='mx-2' 
          disabled={!editorState.canUndo}
        >
          <Undo className="tiptap-btn" />
        </button>
        <button
          type="button"
          onClick={() => editor.chain().focus().redo().run()} 
          className='mx-2'
          disabled={!editorState.canRedo}
        >
          <Redo className="tiptap-btn" />
        </button>
      </div>
    </div>
  )
}

export default () => {
  const editor = useEditor({
    extensions: [
      StarterKit
    ],
    content: ``, 
    immediatelyRender: false,
    editorProps: {
        attributes: {
            class: 'p-3 h-[360px] overflow-scroll focus:outline-none',
        },
    },
  })

  return (
    <div className="border-2 border-black">
      <MenuBar editor={editor} />
      <EditorContent editor={editor} />
    </div>
  )
}
Northeast Congo LionOP
anyone?
@Northeast Congo Lion add the following to your tsconfig.json:
{
  "compilerOptions": {
    "paths": {
      "@tiptap/core": [
        "node_modules/@tiptap/core/src/index"
      ]
    }
  }
}

If that does not solve the issue, update your packages to the latest package. Should be:
npm update or for bun bun update --latest