Skip to content

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

Open
tyler-reitz wants to merge 6 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/react-19-types
Open

fix: replace JSX.Element with React.ReactElement for React 19 compatibility#732
tyler-reitz wants to merge 6 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/react-19-types

Conversation

@tyler-reitz

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:

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<ReactNode>'.

Fix

Replace all JSX.Element return type annotations with React.ReactElement, which is the equivalent type and works correctly with both React 18 and React 19 types. This is not a breaking change — JSX.Element was always an alias for React.ReactElement<any, any>.

Changed in 4 places:

  • src/sdk.tsxSdkProvider (covers AuthProvider and all other SDK providers)
  • src/auth.tsxAuthCheck
  • src/performance.tsxSuspenseWithPerf
  • src/storage.tsxINTERNALStorageImage return type and placeHolder prop type

Fixes #637

@gemini-code-assist gemini-code-assist Bot 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.

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.

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