Slate.js plugin | Error: The useSlate hook must be used inside the <Slate> component's context.

[franckmartin]

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

[jmikrut]

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 slate and slate-react versions exactly to what Payload uses internally in its own package.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.

[franckmartin]

Thank you so much @jmikrut ! It works perfectly

[shaneheyworth]

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.