Skip to content

fix: replace JSX.Element with React types for React 19 compatibility#732

Merged
tyler-reitz merged 7 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/react-19-types
Jul 10, 2026
Merged

fix: replace JSX.Element with React types for React 19 compatibility#732
tyler-reitz merged 7 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/react-19-types

Conversation

@tyler-reitz

@tyler-reitz tyler-reitz commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Problem

Since React 19 removed `JSX.Element` from the global `JSX` namespace, components in reactfire that return `JSX.Element` no longer type-check with React 19 consumers:

```
Type error: 'AuthProvider' cannot be used as a JSX component.
Its type '(props: PropsWithChildren<{ sdk: Auth; }>) => Element' is not a valid JSX element type.
Type 'Element' is not assignable to type 'ReactNode | Promise'.
```

Fix

Replace all `JSX.Element` annotations with explicit `React.*` types. Changed in 4 places:

  • `src/sdk.tsx` — `SdkProvider` return type → `React.ReactElement`
  • `src/auth.tsx` — `AuthCheck` return type → `React.ReactElement`
  • `src/performance.tsx` — `SuspenseWithPerf` return type → `React.ReactElement`
  • `src/storage.tsx` — `INTERNALStorageImage` return type and `placeHolder` prop → `React.ReactNode` (appropriate since a placeholder can be a string, number, null, etc.)

Also adds a CI `type-check` matrix job that runs `tsc` against both `@types/react@18` and `@types/react@19` to prevent regressions.

Fixes #637

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates several component return types and prop types from JSX.Element to React.ReactElement across auth.tsx, performance.tsx, sdk.tsx, and storage.tsx. The review feedback suggests using React.ReactNode instead of React.ReactElement for the placeHolder prop in storage.tsx to allow for more flexible types like strings or numbers, and consequently updating the return type of INTERNALStorageImage to React.ReactNode as well.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/storage.tsx Outdated
Comment thread src/storage.tsx Outdated
tyler-reitz and others added 4 commits July 9, 2026 14:20
JSX.Element was removed from the global JSX namespace in React 19 types.
Components returning JSX.Element are no longer assignable to the updated
ReactNode return type, causing type errors for users on React 19.

Fixes FirebaseExtended#637
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
@tyler-reitz tyler-reitz force-pushed the fix/react-19-types branch from 337af09 to 4121709 Compare July 9, 2026 21:20

@armando-navarro armando-navarro left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR description might be a little misleading now with regard to the storage change, which becomes the squash merge commit body. Very minor, but might want to update that before merging.

One possible follow-up issue I found is that CI only type-checks against @types/react 18, so nothing stops a global JSX.Element from creeping back in and re-breaking React 19 consumers. A small CI step that packs the build and runs tsc over a fixture with @types/react@19 (and 18) would lock this fix in.

Approving the PR.

@tyler-reitz tyler-reitz changed the title fix: replace JSX.Element with React.ReactElement for React 19 compatibility fix: replace JSX.Element with React types for React 19 compatibility Jul 10, 2026
@tyler-reitz tyler-reitz merged commit 137ce72 into FirebaseExtended:main Jul 10, 2026
24 of 26 checks passed
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 this pull request may close these issues.

Support for React 19 types in AuthProvider

2 participants