Unlock seamless workflows and faster delivery with our latest releases- get the details

Discussion about fixing a type error in PortableText with React 17/18

33 replies
Last updated: Aug 25, 2022
How do I fix this in PortableText?
Type error: 'Li' cannot be used as a JSX component.
   Its element type 'ReactElement<any, any> | Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not a valid JSX element.
Aug 18, 2022, 8:56 PM
I tried upgrading React to 18.2.0 but then next wouldn't be found in Vercel
Aug 18, 2022, 9:00 PM
Is this within the Studio?
Aug 18, 2022, 9:04 PM
No, a client
Aug 18, 2022, 9:07 PM
Can you share more information? What does your code look like? What context does it happen in?
Aug 18, 2022, 9:08 PM
Its a portabletext render. Of blocks from sanity.
Aug 18, 2022, 9:10 PM
Alright. We're going to be unable to help you if you don't share significantly more information about your code and what you're trying to do.
Aug 18, 2022, 9:12 PM
const components: Partial<PortableTextReactComponents> = {
  block: {
    normal: ({ children }) => <p className="text-lg">{children}</p>,
    h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,
    h2: ({ children }) => <h2 className="text-2xl">{children}</h2>,
  },
  types: {
    wideartwork: ({ value }: { value: Artwork }) => {
      return (
        <Link href={`/artworks/all/${value._id}`}>
          <a>
            <NextSanityImage
              image={value.image}
              width={1900}
              height={1200}
              className="my-12 lg:my-20 max-h-[80vh] object-contain"
            />
          </a>
        </Link>
      );
    },
    splitartworks: ({
      value,
    }: {
      value: { artworkleft: Artwork; artworkright: Artwork };
    }) => {
      return (
        <div className="grid grid-cols-2 my-12 lg:my-20 gap-4 2xl:gap-12">
          <Link href={`/artworks/all/${value.artworkleft._id}`}>
            <a>
              <NextSanityImage
                image={value.artworkleft.image}
                width={950}
                height={500}
              />
            </a>
          </Link>

          <Link href={`/artworks/all/${value.artworkright._id}`}>
            <a>
              <NextSanityImage
                image={value.artworkright.image}
                width={950}
                height={500}
              />
            </a>
          </Link>
        </div>
      );
    },
  },
};

<PortableText value={project.content} components={components} />
Aug 18, 2022, 9:14 PM
Sorry. Ofc. Is that better?
Aug 18, 2022, 9:14 PM
project.content is is a an array of blocks with different types. No where do I have a list of an Li.
Aug 18, 2022, 9:16 PM
No wait I do. It's a different data set. Maybe adding the
normal
block is what breaks it.
Aug 18, 2022, 9:21 PM
Happens locally too now
Aug 18, 2022, 9:55 PM
Got it. Thanks for sharing your code.
I have a couple of thoughts. First, I wonder if it's incompatibility between different versions of React in react-portable-text and your frontend? If I recall correctly, the portable text package is on 17. Since you mentioned adding the
normal
serializer might be breaking it, does it work if you remove it? That might help us narrow it down.
Aug 18, 2022, 9:58 PM
I realized it had nothing to do with the content
Aug 18, 2022, 9:59 PM
Anything react 17 fails to build, and 18 works
Aug 18, 2022, 10:00 PM
No now both data sets build locally on 17 and 18. I am confused. Waiting on a build and I will see how that differs.
Aug 18, 2022, 10:05 PM
Maybe it's not coming from the components then. What does your usage of the PortableText component look like?
Aug 18, 2022, 10:05 PM
I posted it above
Aug 18, 2022, 10:06 PM
It's just normal text, a bullet list or a referenced image
Aug 18, 2022, 10:07 PM
I meant your usage of that entire PortableText component, not just the components you're passing into it for serialization.
Aug 18, 2022, 10:09 PM
I posted that above
Aug 18, 2022, 10:11 PM
<PortableText value={project.content} components={components} />

Aug 18, 2022, 10:11 PM
No, how are you using that component?
Aug 18, 2022, 10:12 PM
That is the component. That is how I am using it. Not sure what you mean?
Aug 18, 2022, 10:14 PM
I use it to render blocks. Text and images.
Aug 18, 2022, 10:14 PM
I seem to be good now. I got it working, for some reason I don't know.
Aug 19, 2022, 1:15 AM
Do you know how you got around this
user H
? Here's a thread about it on the packages github page but the only potential fix is React 18, something I'm reluctant to do..
Aug 25, 2022, 11:14 AM
No I staying on 17. Saw that thread too.
Aug 25, 2022, 11:22 AM
But I do want to upgrade and this is blocking.
Aug 25, 2022, 11:22 AM
Super weird... I've a friend working on it so will update if there's a fix found
Aug 25, 2022, 11:24 AM
Updating
@types/react
to v18+ was the solution for me. Discovered the answer when I ran into the same issue with an SVG component...
Aug 25, 2022, 2:26 PM
I already had that
Aug 25, 2022, 2:36 PM
Worked for me, good luck!
Aug 25, 2022, 2:38 PM

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?