Go Behind the Experience to see how Tecovas brings the West to life with Sanity ๐Ÿค  July 18th

Error with PortableText components content prop in React/Next.js and solution to migrate to new supported way.

13 replies
Last updated: Aug 12, 2022
I'm struggling with PortableText components content prop in react/next.js. I get this error every time i publish content to the sanity cms editor and try and load the post on my local host.
my nextjs code


<PortableText
            className='mt-10'
            content={post.body}
            dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
            projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
            serializers={{
              h1: (props: any) => (
                <h1 className='text-2xl font-bold my-5'>{props}</h1>
              ),
              h2: (props: any) => (
                <h2 className='text-xl font-bold my-5'>{props}</h2>
              ),
              li: (props: any) => <li className='ml-4 list-disc'>{props}</li>,
              link: ({ href, children }: any) => (
                <a className='text-blue-500 hover:underline' href={href}>
                  {children}
                </a>
              ),
            }}
          />

Aug 12, 2022, 8:13 AM
First suggestion would be to move away from the deprecated portable text renderer. ๐Ÿ™‚ This is the new supported way: https://www.sanity.io/docs/portable-text-to-react
Aug 12, 2022, 8:13 AM
thank you!
Aug 12, 2022, 8:14 AM
If you still have the error then, we can check. ๐Ÿ™‚
Aug 12, 2022, 8:14 AM
Iโ€™m also pretty sure that it should be
{props.children}
and not hust
{props}
? (that is, the approach you have for the
link
serializer)
Aug 12, 2022, 8:17 AM
Ah yes, what Knut said is the actual problem.
Aug 12, 2022, 8:18 AM
But still I encourage you to migrate. ๐Ÿ˜„
Aug 12, 2022, 8:18 AM
I have migrated and everything works, thank you for the quick response. the only thing im stuck on now is styling 'normal; text. im trying to add y axis padding
im not having success with this


 p: ({ children }: any) => <p className='font-bold my-2'>{children}</p>,
Aug 12, 2022, 8:27 AM
can anyone help with this?
Aug 12, 2022, 8:40 AM
p
is not a recognized prop in Portable Text. What you want to customize is
components.block.normal
.
Aug 12, 2022, 8:43 AM
where can i find that in docs,i must of missed it
Aug 12, 2022, 8:51 AM
Mentioned here: https://github.com/portabletext/react-portabletext#block ๐Ÿ™‚
components={{
  block: {
    normal: ({children}) => <p>{children}</p>
  }
}}
Aug 12, 2022, 8:54 AM
totally missed that, i think that's a sign of i need a break. thank you.
Aug 12, 2022, 8:59 AM
๐Ÿ’š
Aug 12, 2022, 9:01 AM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?