From 9d656c16bc78ac31b59b5edbd25118dfc33c4469 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 10 Dec 2024 09:33:54 -0800
Subject: [PATCH] fix(clerk-react): Infer React.JSX.Element instead of explicit
 JSX.Element (#4740)

---
 .changeset/lemon-planes-dress.md                     |  5 +++++
 packages/react/src/components/controlComponents.tsx  | 10 +++++-----
 packages/react/src/contexts/ClerkContextProvider.tsx |  2 +-
 packages/react/src/contexts/ClerkProvider.tsx        |  2 +-
 packages/react/src/utils/useCustomElementPortal.tsx  |  2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/lemon-planes-dress.md

diff --git a/.changeset/lemon-planes-dress.md b/.changeset/lemon-planes-dress.md
new file mode 100644
index 0000000000..bf1bf9740e
--- /dev/null
+++ b/.changeset/lemon-planes-dress.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Return components as `React.JSX.Element` instead of `JSX.Element`
diff --git a/packages/react/src/components/controlComponents.tsx b/packages/react/src/components/controlComponents.tsx
index 0b54363fc3..4f41ef2486 100644
--- a/packages/react/src/components/controlComponents.tsx
+++ b/packages/react/src/components/controlComponents.tsx
@@ -15,7 +15,7 @@ import { useAssertWrappedByClerkProvider } from '../hooks/useAssertWrappedByCler
 import type { RedirectToSignInProps, RedirectToSignUpProps, WithClerkProp } from '../types';
 import { withClerk } from './withClerk';
 
-export const SignedIn = ({ children }: React.PropsWithChildren<unknown>): JSX.Element | null => {
+export const SignedIn = ({ children }: React.PropsWithChildren<unknown>) => {
   useAssertWrappedByClerkProvider('SignedIn');
 
   const { userId } = useAuthContext();
@@ -25,7 +25,7 @@ export const SignedIn = ({ children }: React.PropsWithChildren<unknown>): JSX.El
   return null;
 };
 
-export const SignedOut = ({ children }: React.PropsWithChildren<unknown>): JSX.Element | null => {
+export const SignedOut = ({ children }: React.PropsWithChildren<unknown>) => {
   useAssertWrappedByClerkProvider('SignedOut');
 
   const { userId } = useAuthContext();
@@ -35,7 +35,7 @@ export const SignedOut = ({ children }: React.PropsWithChildren<unknown>): JSX.E
   return null;
 };
 
-export const ClerkLoaded = ({ children }: React.PropsWithChildren<unknown>): JSX.Element | null => {
+export const ClerkLoaded = ({ children }: React.PropsWithChildren<unknown>) => {
   useAssertWrappedByClerkProvider('ClerkLoaded');
 
   const isomorphicClerk = useIsomorphicClerkContext();
@@ -45,7 +45,7 @@ export const ClerkLoaded = ({ children }: React.PropsWithChildren<unknown>): JSX
   return <>{children}</>;
 };
 
-export const ClerkLoading = ({ children }: React.PropsWithChildren<unknown>): JSX.Element | null => {
+export const ClerkLoading = ({ children }: React.PropsWithChildren<unknown>) => {
   useAssertWrappedByClerkProvider('ClerkLoading');
 
   const isomorphicClerk = useIsomorphicClerkContext();
@@ -212,7 +212,7 @@ export const AuthenticateWithRedirectCallback = withClerk(
   'AuthenticateWithRedirectCallback',
 );
 
-export const MultisessionAppSupport = ({ children }: React.PropsWithChildren<unknown>): JSX.Element => {
+export const MultisessionAppSupport = ({ children }: React.PropsWithChildren<unknown>) => {
   useAssertWrappedByClerkProvider('MultisessionAppSupport');
 
   const session = useSessionContext();
diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx
index 00b2c153df..188bc2b3a5 100644
--- a/packages/react/src/contexts/ClerkContextProvider.tsx
+++ b/packages/react/src/contexts/ClerkContextProvider.tsx
@@ -16,7 +16,7 @@ type ClerkContextProvider = {
 
 export type ClerkContextProviderState = Resources;
 
-export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element | null {
+export function ClerkContextProvider(props: ClerkContextProvider) {
   const { isomorphicClerkOptions, initialState, children } = props;
   const { isomorphicClerk: clerk, loaded: clerkLoaded } = useLoadedIsomorphicClerk(isomorphicClerkOptions);
 
diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx
index cc730af2f3..66b21ed8a3 100644
--- a/packages/react/src/contexts/ClerkProvider.tsx
+++ b/packages/react/src/contexts/ClerkProvider.tsx
@@ -7,7 +7,7 @@ import type { ClerkProviderProps } from '../types';
 import { withMaxAllowedInstancesGuard } from '../utils';
 import { ClerkContextProvider } from './ClerkContextProvider';
 
-function ClerkProviderBase(props: ClerkProviderProps): JSX.Element {
+function ClerkProviderBase(props: ClerkProviderProps) {
   const { initialState, children, __internal_bypassMissingPublishableKey, ...restIsomorphicClerkOptions } = props;
   const { publishableKey = '', Clerk: userInitialisedClerk } = restIsomorphicClerkOptions;
 
diff --git a/packages/react/src/utils/useCustomElementPortal.tsx b/packages/react/src/utils/useCustomElementPortal.tsx
index ba2bec4c69..3bdc3ef35c 100644
--- a/packages/react/src/utils/useCustomElementPortal.tsx
+++ b/packages/react/src/utils/useCustomElementPortal.tsx
@@ -7,7 +7,7 @@ export type UseCustomElementPortalParams = {
 };
 
 export type UseCustomElementPortalReturn = {
-  portal: () => JSX.Element;
+  portal: () => React.JSX.Element;
   mount: (node: Element) => void;
   unmount: () => void;
   id: number;