fix(clerk-react): Infer React.JSX.Element instead of explicit JSX.Element

.changeset/lemon-planes-dress.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Return components as `React.JSX.Element` instead of `JSX.Element`

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();

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);
 

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;
 

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;