portabletext/react-portabletext

Does not appear to work with Next 13 Server Components

rblackman opened this issue · 8 comments

rblackman commented

This package does not seem to be compatible with Next 13's App directory/server components. When used with Next.js 13, it results in the following error:

Server Error
TypeError: w.createContext is not a function

jezpoz commented

Hi @rblackman

I tried this with Next.js 13 as well, and I got the same error. But then I read about server components vs. client components.
It worked if I created a PortableText component like this:

'use client';

import { PortableText } from '@portabletext/react';
import type { PortableTextComponents } from '@portabletext/react';

const portabletextComponents: PortableTextComponents = {
  block: {
    h1: ({children}) => <h1 className="text-3xl">{children}</h1>,
    h2: ({children}) => <h2 className="text-xl">{children}</h2>,
    h3: ({children}) => <h3 className="text-lg">{children}</h3>,
    normal: ({children}) => <p className="text-base">{children}</p>
  }
}

export function Content({blocks}) {
  return (
    <PortableText value={blocks} components={portabletextComponents} />
  )
}

By adding the 'use client;' at top of this file, it will render as a client component described here

rblackman commented

Hmm, I thought I tried that and got the same error. Rereading the documentation again, I think I may have put the 'use client' line after my imports so I'm wondering if it didn't actually render as a client component. I will experiment more and see if I can come up with reliable reproduction steps.

I guess as a feature request, it would be nice if this worked with server components. I don't know how practical that request is.

EDIT: 'use client' worked for me too. It seems it is only server components that do not work.

  • 👍1
alvarlagerlof commented

It worked for me with "use client" too, but it's not ideal, because then the server cannot render an initial HTM during SSR. Would also love if this component worked with server components too!

jezpoz commented

@rblackman @alvarlagerlof

I tried without the 'use client;' and using the @portabletext/to-html.
This works with Next.js 13.

But of course, this is a workaround. Would be great to have support for server components in this repo aswell.

  • ❤️1
alvarlagerlof commented

@jezpoz That's nice, but I'm going to have to wait, since I rely on next/image and a code viewer component. Thanks anyways!

  • 👍1
pm0u commented

Also ran into this same error, agree - workarounds are somewhat moot. Will have to wait for a fix. Has anyone tried Next 13/React 18 using the pages directory?

edit: I guess I assume that would work since the issue is likely that server components are stateless/can't have context

alvarlagerlof commented

Has anyone tried Next 13/React 18 using the pages directory?

I have, my whole site is upgraded to it. https://alvar.dev and https://github.com/alvarlagerlof/portfolio. Server components can't do client context, which this library makes use of. So that's why. I had to add "use client" to my block content render component as described above. That causes it to need to load (render) on blog posts.

rexxars commented

We just released @portabletext/react@2.0.0 which should support rendering through React Server Components. Do note that there are a few breaking changes in this release, if you were using context to pass down component configuration: https://github.com/portabletext/react-portabletext/releases/tag/v2.0.0

  • 🎉3
  • 🚀2