Skip to content

Overlay components cannot be used as JSX components due to type errors #8092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zachbwh opened this issue Apr 14, 2025 · 5 comments · May be fixed by #8099
Open

Overlay components cannot be used as JSX components due to type errors #8092

zachbwh opened this issue Apr 14, 2025 · 5 comments · May be fixed by #8099

Comments

@zachbwh
Copy link

zachbwh commented Apr 14, 2025

Provide a general summary of the issue here

I'm just upgrading to the latest version of react-aria now and I'm getting a number of type errors that appear to be related to this PR (I believe this commit is responsible).

🤔 Expected Behavior?

There should be no type errors when using DismissButton or OverlayProvider components as JSX elements.

😯 Current Behavior

There are type errors when using the DismissButton or OverlayProvider components as a JSX elements

💁 Possible Solution

The return types of at least some of the overlay components should probably be ReactElement and not ReactNode, since ReactNode is broader than required and prevents components from being used as JSX elements.

I've highlighted DismissButton and OverlayProvider because they're the errors I've encountered so far. I suspect there are more components than that with this issue.

🔦 Context

No response

🖥️ Steps to Reproduce

  1. Using @react-aria/overlays version 3.27.0
  2. Attempt to use the DismissButton component, like below
  3. See the below type errors
import React from 'react'
import { DismissButton } from 'react-aria'
import type { DismissButtonProps } from 'react-aria'

type AriaDismissProps = DismissButtonProps

export const AriaDismiss = ({ onDismiss }: AriaDismissProps) => {
  return (
    <DismissButton
      aria-label="Dismiss"
      onDismiss={onDismiss}
    />
  )
}
'DismissButton' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

We're in the process of moving away from react 17, so our @react-types @types/react version is currently 17.0.85

Version

[email protected], but the relevant transitive dependency seems to be react-aria/[email protected]

What browsers are you seeing the problem on?

Other

If other, please specify.

No response

What operating system are you using?

macOS Sequoia Version 15.4

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@snowystinger
Copy link
Member

What version of React Types are you on? you may need to update that.

@zachbwh
Copy link
Author

zachbwh commented Apr 15, 2025

What version of React Types are you on? you may need to update that.

We're on @types/react 17.0.85, which I believe is the latest version of v17 (published 19 days ago).

As for @react-types, I can repro with @react-types/[email protected] in addition to the other specified packages. We use react-aria, react-stately, and react-types as a transitive dependency. I can repro when all the aforementioned packages are on the latest versions (though technically I haven't bumped react-aria, but I have deleted the lockfile and regenerated it's resolved dependencies.

@abeljohn
Copy link
Contributor

I'm running into the same issue when trying to upgrade to react-aria-components 1.8.0, for several components that now return ReactNode.

Upgrading @types/react from 18.2.0 to 18.2.79 did not solve the issue, likely because I'm still using typescript 4.8.4, and overriding JSX.ElementType (which @types/react does) was only added in typescript 5.1.

@snowystinger snowystinger linked a pull request Apr 16, 2025 that will close this issue
5 tasks
@snowystinger
Copy link
Member

I've opened a PR to explicitly go back to the types we implicitly had before, sorry for the disruption. #8099

@devongovett
Copy link
Member

Please upgrade your dependencies though 😉. React 17 is almost 5 years old. TypeScript 4.8 is almost 3. At some point compatibility with these will inevitably break.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants