chakra-ui / ark

A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.

Home Page:https://ark-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`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

  1. Update package.json's @types/react to a version older than 18.2.8.
  "devDependencies": {
    "@types/react": "18.2.7",
  }
  1. Delete node_modules.
  2. Install dependencies again.
  3. 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 :)