I’m trying to use slate editor, following the example exposed in the documentation.
I’m getting the next error:
page.tsx:33 Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
at Widget (page.tsx:33:9)
at renderWithHooks (react-dom.development.js:15015:20)
at mountIndeterminateComponent (react-dom.development.js:17841:15)
at beginWork (react-dom.development.js:19079:18)
at HTMLUnknownElement.callCallback (react-dom.development.js:3942:16)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3991:18)
at invokeGuardedCallback (react-dom.development.js:4053:33)
at beginWork$1 (react-dom.development.js:23994:9)
at performUnitOfWork (react-dom.development.js:22806:14)
at workLoopSync (react-dom.development.js:22737:7)
This is my code:
import {useState} from "react";
import {createEditor} from 'slate'
// Import the Slate components and React plugin.
import {Slate, Editable, withReact} from 'slate-react'
// TypeScript users only add this code
import {BaseEditor, Descendant} from 'slate'
import {ReactEditor} from 'slate-react'
import React from "react";
type CustomElement = { type: 'paragraph'; children: CustomText[] }
type CustomText = { text: string }
declare module 'slate' {
interface CustomTypes {
Editor: BaseEditor & ReactEditor
Element: CustomElement
Text: CustomText
}
}
export /*bundle*/
function Widget() {
const initialValue: CustomElement[] = []
const [editor] = useState(() => withReact(createEditor()))
const [value, setValue] = useState([])
console.log("SI?", Slate, editor, Editable)
return (
<Slate
editor={editor}
value={value}
onChange={newValue => setValue(newValue)}
>
<Editable />
</Slate>
)
}
Can anybody help me to understand where is the problem?