`Portal` return types are not compatible with some versions of `@types/react`.
irwinarruda opened this issue · comments
Description
Recently, after creating a simple Next.js project on my Windows machine and trying to use Ark's Modal
, I got the following error:
Diagnostics:
1. 'Portal' cannot be used as a JSX component.
Its return type 'ReactNode | ReactPortal[]' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'. [2786]
Replicating the same steps on another computer did not trigger the error.
Upon further investigation, I found the following issue: DefinitelyTyped Pull Request #65135.
It appears that React v18 supports ReactNode
as a return type for Functional Components. However, the @types/react
package only updated its JSXElementConstructor
definition to include ReactNode
starting from version 18.2.8
.
Before 18.2.8
type JSXElementConstructor<P> =
| ((props: P, deprecatedLegacyContext?: any) => ReactElement<any, any> | null)
| (new (props: P) => Component<any, any>);
Before After 18.2.8
type JSXElementConstructor<P> =
| ((props: P, deprecatedLegacyContext?: any) => ReactNode)
| (new (props: P) => Component<any, any>);
All of this means that even with the type changes made in #1787, users might still face compatibility issues if their project is using @types/react
versions older than 18.2.8
. The discussion then is to decide if Ark will support "older" versions of the React v18 types package.
There are a lot of approaches to fixing this issue, and if you decide to do so, I would really like to contribute by creating a PR.
Link to Reproduction (or Detailed Explanation)
No need for links
Steps to Reproduce
- Update
package.json
's@types/react
to a version older than18.2.8
.
"devDependencies": {
"@types/react": "18.2.7",
}
- Delete
node_modules
. - Install dependencies again.
- Restart editor's
Lsp
if needed.
Ark UI Version
^2.0.1
Framework
- React
- Solid
- Vue
Browser
No response
Additional Information
No response
Well-written issue, thanks.
I am sure users will be happy with the backward compatibility. Feel free to solve the issue :)