react-portabletext
react-portabletext copied to clipboard
portabletext
PortableText Typescript Error
I am upgrading my NextJs/Sanity application to NextJS 13 using Sanity.io and typescript.
The PortableText tag no longer works. The value and components attributes are flagged as an error in Visual Studio Code.
import { PortableText } from "@portabletext/react";
<PortableText value={post?.body} components={components} />
I am getting the following error:
ype 'PortableTextBlockComponent[]' is not assignable to type 'TypedObject | TypedObject[]'. Type 'PortableTextBlockComponent[]' is not assignable to type 'TypedObject[]'. Type 'PortableTextBlockComponent' is not assignable to type 'TypedObject'. Property '_type' is missing in type 'ComponentClass<PortableTextComponentProps<PortableTextBlock<PortableTextMarkDefinition, ArbitraryTypedObject | PortableTextSpan, string, string>>, any>' but required in type 'TypedObject'.ts(2322) index.d.ts(171, 3): '_type' is declared here. react-portable-text.d.ts(163, 3): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & PortableTextProps' (property) PortableTextProps.value: TypedObject | TypedObject[]
Currently facing something similar but I don't know how much it applies to your situation:
For the value prop it is most likely that you haven't declared the type of the post body. I currently declare the type of my post body as body?: PortableTextBlock; in your type declarations.
As for the components my issue was that the children props in the block I wanted to edit was optional instead of required. So simply change the props in the block you want to edit to ({children}: {children?: any}) for example.
Finally, if you are using VS Code simply use Ctrl + Click (Cmd + click on Mac) on the component/type that you want to learn more about and follow along the type declarations that come with the module. They are probably your best source of information and documentation. Good luck!
Yes, still have issues trying to type the values... <PortableText value={post?.body:PortableTextProps[] } components={components} /> does not work ...
Check the type of PortableText you will understand what to do :) @donhook
hope it works for you
