Compatibility with NextJS 15.x Pages Router / SSR

[MauriceArikoglu]

Description

Following the guide on https://platejs.org/docs/installation/manual or https://platejs.org/docs/installation/next yields successful development and production builds.

On development, plate displays fine - everything works as expected.

Running next start and opening a page errors:

Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).

TypeError: can't access property "useRef", E.H is null
    NextJS 36
        useRef
        useSyncExternalStoreWithSelector
        n
        n
        j
        e_
        rS
        rw
        t$
        rU
        a$
        ob
        oB
        sc
        su
        su
        i7
        sB
        _
        45919
        r
        62786
        r
        24279
        r
        78944
        r
        51467
        r
        58340
        r
        <anonymous>
        O
        <anonymous>
        t
        <anonymous>

moduleResolution is bundler

Reproduction URL

No response

Reproduction steps

1. Next 15.x Pages Router
2. Follow the instruction to install platejs
3. next build
4. next start
5. See error upon loading page

Plate version

49

Slate React version

0.117.4

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

Hi @MauriceArikoglu! I'm Dosu and I’m helping the plate team.

This error is almost always caused by one of these issues:

• The Plate editor component or page is missing the 'use client' directive at the top. All interactive Plate editors (using <Plate>, usePlateEditor, etc.) must be in client components—never in server components or outside 'use client' boundaries.
• Plate and all @platejs/* packages are not on the exact same version (should be 49.2.9 or higher for React 19/Next.js 15). Mixing versions (e.g., 49.0.x with 49.2.x) causes subtle runtime errors, including hook failures and blank UI.
• Multiple versions of slate, slate-react, or slate-dom are present in your dependency tree. Use package.json overrides or resolutions to force a single version for each (e.g., "slate": "0.117.4", etc.)
• Custom Plate UI components (toolbars, buttons, floating UI) do not use React.forwardRef. Plate 49.x requires this for all custom UI to avoid ref and rendering errors.
• Tailwind v4 and shadcn/ui v4 primitives are missing or misconfigured, causing layout or style issues.

Check all of the above. If the error persists, try creating a minimal Next.js 15 + Plate 49.2.9+ project with only the editor and required dependencies, then add your custom code incrementally to isolate the cause.
More details and troubleshooting steps are in the docs and compatibility threads.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[MauriceArikoglu]

We already tried the suggested steps. Anyone got a working solution?

[dosubot[bot]]

There isn’t a special workaround documented for this error beyond what’s in the official Plate + Next.js 15 guides and templates. A working setup in production requires: every interactive Plate editor component/page must have 'use client' at the top, all Plate and @platejs/* packages must be on the exact same version (preferably 49.2.9+), all Slate dependencies deduped and aligned via package.json overrides, and plugins/components registered via Plugin.withComponent(Component). This is exactly how the Plate playground template and registry examples are set up and they work in production builds cite cite.

If you’ve already done all of this and still get the error, the next step is to create a minimal reproduction (just Plate, React 19, Next.js 15, no custom code) and add things back one by one to isolate the cause. If the minimal setup fails, it could be a bug or an edge case with your environment.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}