From f11997ade3304ad7a7ad7a0e3445529887846e5f Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Mon, 8 Jan 2024 17:30:41 +0200
Subject: [PATCH] fix(nextjs,remix): CustomPages in remix & nextjs SDKs

---
 .changeset/nine-mayflies-smoke.md             |  7 +++++
 .../src/client-boundary/uiComponents.tsx      | 26 ++++++++++++++-----
 packages/remix/src/client/uiComponents.tsx    | 26 ++++++++++++++-----
 3 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/nine-mayflies-smoke.md

diff --git a/.changeset/nine-mayflies-smoke.md b/.changeset/nine-mayflies-smoke.md
new file mode 100644
index 00000000000..39fd203d730
--- /dev/null
+++ b/.changeset/nine-mayflies-smoke.md
@@ -0,0 +1,7 @@
+---
+'@clerk/nextjs': patch
+'@clerk/remix': patch
+---
+
+Fix property `Page`/ `Link` missing from the `UserProfile` / `OrganizationProfile`
+when imported from `@clerk/nextjs` or `@clerk/remix`.
diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 245e4de63c9..dc3d91e262c 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -29,17 +29,31 @@ export {
   UserButton,
 } from '@clerk/clerk-react';
 
-export const UserProfile = (props: UserProfileProps) => {
-  return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
-};
+// The assignment of UserProfile with BaseUserProfile props is used
+// to support the CustomPage functionality (eg UserProfile.Page)
+// Also the `typeof BaseUserProfile` is used to resolved the following error:
+// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
+export const UserProfile: typeof BaseUserProfile = Object.assign(
+  (props: UserProfileProps) => {
+    return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
+  },
+  { ...BaseUserProfile },
+);
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
   return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 };
 
-export const OrganizationProfile = (props: OrganizationProfileProps) => {
-  return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
-};
+// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
+// to support the CustomPage functionality (eg OrganizationProfile.Page)
+// Also the `typeof BaseOrganizationProfile` is used to resolved the following error:
+// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
+export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
+  (props: OrganizationProfileProps) => {
+    return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
+  },
+  { ...BaseOrganizationProfile },
+);
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkNextOptions();
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index c632da286c5..d3cd7f457c0 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -17,17 +17,31 @@ import React from 'react';
 
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
-export const UserProfile = (props: UserProfileProps) => {
-  return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
-};
+// The assignment of UserProfile with BaseUserProfile props is used
+// to support the CustomPage functionality (eg UserProfile.Page)
+// Also the `typeof BaseUserProfile` is used to resolved the following error:
+// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
+export const UserProfile: typeof BaseUserProfile = Object.assign(
+  (props: UserProfileProps) => {
+    return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
+  },
+  { ...BaseUserProfile },
+);
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
   return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 };
 
-export const OrganizationProfile = (props: OrganizationProfileProps) => {
-  return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
-};
+// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
+// to support the CustomPage functionality (eg OrganizationProfile.Page)
+// Also the `typeof BaseOrganizationProfile` is used to resolved the following error:
+// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
+export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
+  (props: OrganizationProfileProps) => {
+    return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
+  },
+  { ...BaseOrganizationProfile },
+);
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkRemixOptions();