Type error on build – 'Li' cannot be used as a JSX component. about react-portabletext

[dragomirweb]

Solved my error by upgrading "@portabletext/react": "1.0.6", and "react": "18.0.0" but that might not be a solution for everybody.

[dragomirweb]

I have the exact same issue, when building a docker image.
node v 14.18.3

`Failed to compile.

./node_modules/@portabletext/react/src/react-portable-text.tsx:136:8
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> | null' is not a valid JSX element.
Type 'Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/app/node_modules/@types/react-mailchimp-subscribe/node_modules/@types/react/index").ReactNode'.
`

[scottgrunerud]

Hi I am also having the same issue, suddenly on a new install I get this issue?

Additional Info:

Node Version: v16.14.2
@portabletext/react: "^1.0.2" it also breaks on 1.0.6
react: 17.0.2
next: 12.1.4

UPDATE:

Interestingly this seems to only happen when I install the package using Yarn, it works fine using npm i? I am using yarn version 1.22.18

[vrease]

Solved my error by upgrading "@portabletext/react": "1.0.6", and "react": "18.0.0" but that might not be a solution for everybody.

Yes, worked for me too

[scottgrunerud]

Solved my error by upgrading "@portabletext/react": "1.0.6", and "react": "18.0.0" but that might not be a solution for everybody.

I wonder if the reason this works is because of https://twitter.com/dan_abramov/status/1513871810969882625?cxt=HHwWgsCyhYWZrYIqAAAA

[einer20]

I had the same error I solved by wrapping the component inside a native html tag.

I'm using the pinterest gestalt library, specifically the Link component to render the links of the portable text and i was getting this error so i changed this:

"link": (props) =>  {
  return  <Link inline href="#" onClick={x=> window.history.back()}>{props.text}</Link> 
}

To this, by wrapping the Link component with a span tag:

"link": (props) =>  {
  return  <span><Link inline href="#" onClick={x=> window.history.back()}>{props.text}</Link> </span>;
}

And it worked. Looks like there is a compatibility issue with react components. Hope it helps.

[wrux]

Did anyone find a working fix for this other than upgrading to React 18?

[Ojay]

Adding/upgrading @types/react to V18+ worked for me... though I think that may well introduce build issues as I'm using react 17.0.2 at the moment.

[evenwestvang]

Looks like this is a solved by an upgrade.