ianstormtaylor/slate · error · Error
The `useEditor` hook must be used inside the <Slate> compone
Error message
The `useEditor` hook must be used inside the <Slate> component's context.
What it means
useEditor() requires the React context provided by <Slate>. Calling it in a component rendered outside a <Slate> provider yields a null context, and the hook throws to surface the mistake early instead of returning undefined and crashing later.
Source
Thrown at packages/slate-react/src/hooks/use-editor.tsx:14
import { useContext } from 'react'
import { EditorContext } from './use-slate-static'
/**
* Get the current editor object from the React context.
* @deprecated Use useSlateStatic instead.
*/
export const useEditor = () => {
const editor = useContext(EditorContext)
if (!editor) {
throw new Error(
`The \`useEditor\` hook must be used inside the <Slate> component's context.`
)
}
return editor
}
View on GitHub (pinned to 72a37c701e)
Solutions
- Move the component inside the <Slate>...</Slate> subtree
- In tests, wrap rendered components in a <Slate editor={editor} initialValue={...}> helper
- For portals, wrap portal content in the same context provider or use a custom render target inside the tree
Example fix
// before
function Toolbar(){ const editor = useEditor(); ... }
render(<Toolbar/>) // no provider
// after
render(
<Slate editor={editor} initialValue={initialValue}>
<Toolbar/>
</Slate>
) Defensive patterns
Strategy: validation
Validate before calling
// render helper
function renderWithSlate(ui) {
const editor = withReact(createEditor())
return render(<Slate editor={editor} initialValue={[{type:'paragraph',children:[{text:''}]}]}>{ui}</Slate>)
} Prevention
- Keep editor-consuming components inside the <Slate> subtree
- Create a shared test wrapper providing <Slate>
- Re-provide context inside portals
When it happens
Trigger: Calling useEditor() (or a component that uses it) outside of <Slate>...</Slate>; rendering editor-dependent components as siblings rather than children of <Slate>; testing components with render() but no Slate wrapper; portals rendered outside the provider tree.
Common situations: Component trees reorganized so a leaf ends up outside <Slate>; unit tests (Jest/RTL) rendering leaves without the provider; portals to document.body escaping the context.
Related errors
- The `useSlateSelector` hook must be used inside the <Slate>
- The `useSlateStatic` hook must be used inside the <Slate> co
- The `useSlate` hook must be used inside the <Slate> componen
- [Slate] initialValue is invalid! Expected a list of elements
- [Slate] editor is invalid! You passed: ${Scrubber.stringify(
AI-assisted analysis of ianstormtaylor/slate@72a37c701e (2026-08-27).
Data as JSON: /api/errors/bf520c2d1e482392.
Report an issue: GitHub.