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

              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}>

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:
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
and not hust
? (that is, the approach you have for the
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
is not a recognized prop in Portable Text. What you want to customize is
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: ๐Ÿ™‚
  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

The Sanity Composable Content Cloud is the 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?