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",
  }

2. Delete node_modules.
3. Install dependencies again.
4. Restart editor's Lsp if needed.

Ark UI Version

^2.0.1

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response