"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
Slate.js plugin | Error: The `useSlate` hook must be used inside the <Slate> component's context.
Hi ! 🙂
I copied the largeBody Slate.js plugin from the public-demo to my repo and it works perfectly. I did a blockquote plugin based on this model and it works well too. But when I'm trying to use slightly more sophisticated plugins like hr, I get the following error :
The `useSlate` hook must be used inside the <Slate> component's context.
Do you have any idea why the <Slate> context is not available?
I installed the slate package in version 0.91.4 and the slate-react package in version 0.91.10
Thanks for your help
Selected Answer
Hey there - this is because you have two copies of Slate in use - one local, and one within Payload. Instead of installing a separate copy of
slate/slate-react, just use Payload's copies.You could also try making sure to match the
slateandslate-reactversions exactly to what Payload uses internally in its ownpackage.json.Last thing, if you do want to have additional copies of Slate installed, you could write a Webpack alias to make sure that when you import Slate, it always points to the same copy of Slate.
This is a React problem more than anything, with how it handles context / etc. But this should be what you need here.
2 repliesThank you so much @jmikrut ! It works perfectly
Do either of you have a written example of this? I am trying to either integrate my own color picker into leaves, and get teh same error. I have tried this package too - https://github.com/we-are-you/payloadcms-slate-plugin-textcolor-leaf - same happens.
Star
Discord
online
Get dedicated engineering support directly from the Payload team.