Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
franckmartin2 years ago
1 1

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
    discord user avatar
    jmikrut
    2 years ago

    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.

    2 replies
  • default discord avatar
    franckmartin2 years ago

    Thank you so much @jmikrut ! It works perfectly

  • default discord avatar
    shaneheyworth7 months ago

    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 on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.