Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PortableText Typescript Error #71

Open
donhook opened this issue Jul 25, 2023 · 5 comments
Open

PortableText Typescript Error #71

donhook opened this issue Jul 25, 2023 · 5 comments
Labels

Comments

@donhook
Copy link

donhook commented Jul 25, 2023

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[]

@martin-popoff
Copy link

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!

@donhook
Copy link
Author

donhook commented Jul 27, 2023

Thank you Martin for your time and suggestions!

@donhook
Copy link
Author

donhook commented Jul 27, 2023

Yes, still have issues trying to type the values...
<PortableText value={post?.body:PortableTextProps[] } components={components} />
does not work ...

@Nirvana55
Copy link

Nirvana55 commented Feb 27, 2024

Check the type of PortableText you will understand what to do :)
@donhook

hope it works for you

@Shoyayeb
Copy link

Anybody have fix for this?
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants