Hydration errors from nested portable text blocks

[devgladstone]

For a portable text block, I have a serializer in marks to specify rendering a component, and within that component, I'm using another portable text block. By default, the topmost div gets wrapped in a <p> tag, causing hydration errors due to that topmost <p> tag having children with <div> and <p> in it.

So, is there a way to render the block without a <p> tag automatically wrapping the component, and thus avoid hydration errors?

---

Here's a simple outline of the code for reference:

const MyApp = () => {
  return <PortableText value={body} components={PortableTextComponents} />
}

const PortableTextComponents = {
  marks: {
    serializer: ({value}) => {
      return <MyComponent body={value} />
    },
  },
}

const MyComponent = ({body}) => {
  return <PortableText value={body} />
}

[alvarlagerlof]

Suffering this as well. In my case it's a code type mark that I want to style with a <pre> tag.

Edit: fixed mine by swapping to a <code> tag.

[dcodrin]

@devgladstone In your case did you notice your styles not apply to the nested blocks? Having an issue where none of the classnames are applied to any of the nested portable text blocks.

[snorrees]

To handle this case, you should use a custom block renderer for normal style than outputs a different wrapper type.