tiptap types problem
Unanswered
Northeast Congo Lion posted this in #help-forum
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:
If that does not solve the issue, update your packages to the latest package. Should be:
{
"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