Type error on build – 'Li' cannot be used as a JSX component.
vrease opened this issue · 9 comments
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 \| )
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'.
`
Solved my error by upgrading "@portabletext/react": "1.0.6", and "react": "18.0.0" but that might not be a solution for everybody.
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
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
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
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.
Did anyone find a working fix for this other than upgrading to React 18?
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.
Looks like this is a solved by an upgrade.