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

TypeScript error when using react-portabletext component in NextJS project

1 replies
Last updated: Apr 13, 2022
[RESOLVED — See update in the thread]Hi, I have an issue using
react-portabletext component within NextJS/TypeScript project.
When I set up a basic example for block styling as shown in the readme:


const components = {
  block: {
    h1: ({children}) => <h1 className="text-2xl">{children}</h1>,
  }
};

<PortableText value={body} components={components} />
I get the following TypeScript error on the &lt;PortableText&gt; component:


Type '{ block: { h1: ({ children }: { children: any; }) => Element; }; }' is not assignable to type 'Partial<PortableTextReactComponents>'.
  Types of property 'block' are incompatible.
    Type '{ h1: ({ children }: { children: any; }) => Element; }' is not assignable to type 'PortableTextBlockComponent | Record<string, PortableTextBlockComponent>'.
      Type '{ h1: ({ children }: { children: any; }) => Element; }' is not assignable to type 'Record<string, PortableTextBlockComponent>'.
        Property 'h1' is incompatible with index signature.
          Type '({ children }: { children: any; }) => Element' is not assignable to type 'PortableTextBlockComponent'.
            Type '({ children }: { children: any; }) => Element' is not assignable to type 'FunctionComponent<PortableTextComponentProps<PortableTextBlock<PortableTextMarkDefinition, ArbitraryTypedObject | PortableTextSpan, string, string>>>'.
              Types of parameters '__0' and 'props' are incompatible.
                Type 'PropsWithChildren<PortableTextComponentProps<PortableTextBlock<PortableTextMarkDefinition, ArbitraryTypedObject | PortableTextSpan, string, string>>>' is not assignable to type '{ children: any; }'.
                  Property 'children' is optional in type 'PortableTextComponentProps<PortableTextBlock<PortableTextMarkDefinition, ArbitraryTypedObject | PortableTextSpan, string, string>> & { ...; }' but required in type '{ children: any; }'.ts(2322)
[types.ts(32, 3): ]()The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & PortableTextProps<any>'
While the front-end still renders fine locally, this is preventing me from deploying the project on Vercel as the build is failing.
Any tips are appreciated.
Apr 13, 2022, 11:39 AM
Just an update for anyone who stumbles upon this issue - you can resolve it by specifying the type for the components variable:

import { PortableText, PortableTextReactComponents } from "@portabletext/react";

const components:Partial<PortableTextReactComponents> = {
  block: {
    h1: ({children}) => <h1 className="text-2xl">{children}</h1>,
  }
};
Shouldn’t be required, but works when done this way.
Apr 13, 2022, 1:09 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?