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

…ment
clerk · Dec 9, 2024 · aea7348 · aea7348
1 parent 8db1195
commit aea7348
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/lemon-planes-dress.md 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
@@ -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
@@ -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
@@ -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
@@ -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;