Type error on build – 'Li' cannot be used as a JSX component.

[vrease]

I started to get this type error during build step on Vercel 24 hours ago. Latest sucessfully build was 3 days ago: Type error: 'Li' cannot be used as a JSX component. in @portabletext/react

Project: Next JS, Sanity.

Dependencies I use (the relevant parts):

...
"@portabletext/react": "^1.0.4",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"@portabletext/types": "^1.0.3",
"@types/react": "^17.0.42",
"@typescript-eslint/eslint-plugin": "^5.16.0",
"@typescript-eslint/parser": "^5.16.0",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.7.0",
"typescript": "^4.6.2"

Error:

./node_modules/@portabletext/react/src/react-portable-text.tsx:136:8
--
09:34:49.278 | Type error: 'Li' cannot be used as a JSX component.
09:34:49.278 | Its element type 'ReactElement<any, any> \| Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not a valid JSX element.
09:34:49.278 | Type 'Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not assignable to type 'Element \| ElementClass'.
09:34:49.278 | Type 'Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not assignable to type 'ElementClass'.
09:34:49.278 | The types returned by 'render()' are incompatible between these types.
09:34:49.278 | Type 'React.ReactNode' is not assignable to type 'import("/vercel/path0/web/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
09:34:49.278 |  
09:34:49.278 | 134 \|
09:34:49.278 | 135 \|     return (
09:34:49.278 | > 136 \|       <Li key={key} value={node} index={index} isInline={false} renderNode={renderNode}>
09:34:49.278 | \|        ^
09:34:49.279 | 137 \|         {children}
09:34:49.279 | 138 \|       </Li>
09:34:49.279 | 139 \|     )

[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'. `

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

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