Skip to content

Commit b67f6ab

Browse files
dimkldimkl
authored
fix(nextjs,remix): CustomPages in remix & nextjs SDKs (clerk#2508)
1 parent 1dc28ab commit b67f6ab

3 files changed

Lines changed: 47 additions & 12 deletions

File tree

‎.changeset/nine-mayflies-smoke.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@clerk/nextjs': patch
3+
'@clerk/remix': patch
4+
---
5+
6+
Fix property `Page`/ `Link` missing from the `UserProfile` / `OrganizationProfile`
7+
when imported from `@clerk/nextjs` or `@clerk/remix`.

‎packages/nextjs/src/client-boundary/uiComponents.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,31 @@ export {
2929
UserButton,
3030
} from '@clerk/clerk-react';
3131

32-
export const UserProfile = (props: UserProfileProps) => {
33-
return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
34-
};
32+
// The assignment of UserProfile with BaseUserProfile props is used
33+
// to support the CustomPage functionality (eg UserProfile.Page)
34+
// Also the `typeof BaseUserProfile` is used to resolved the following error:
35+
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
36+
export const UserProfile: typeof BaseUserProfile = Object.assign(
37+
(props: UserProfileProps) => {
38+
return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
39+
},
40+
{ ...BaseUserProfile },
41+
);
3542

3643
export const CreateOrganization = (props: CreateOrganizationProps) => {
3744
return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
3845
};
3946

40-
export const OrganizationProfile = (props: OrganizationProfileProps) => {
41-
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
42-
};
47+
// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
48+
// to support the CustomPage functionality (eg OrganizationProfile.Page)
49+
// Also the `typeof BaseOrganizationProfile` is used to resolved the following error:
50+
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
51+
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
52+
(props: OrganizationProfileProps) => {
53+
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
54+
},
55+
{ ...BaseOrganizationProfile },
56+
);
4357

4458
export const SignIn = (props: SignInProps) => {
4559
const { signInUrl } = useClerkNextOptions();

‎packages/remix/src/client/uiComponents.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,31 @@ import React from 'react';
1717

1818
import { useClerkRemixOptions } from './RemixOptionsContext';
1919

20-
export const UserProfile = (props: UserProfileProps) => {
21-
return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
22-
};
20+
// The assignment of UserProfile with BaseUserProfile props is used
21+
// to support the CustomPage functionality (eg UserProfile.Page)
22+
// Also the `typeof BaseUserProfile` is used to resolved the following error:
23+
// "The inferred type of 'UserProfile' cannot be named without a reference to ..."
24+
export const UserProfile: typeof BaseUserProfile = Object.assign(
25+
(props: UserProfileProps) => {
26+
return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
27+
},
28+
{ ...BaseUserProfile },
29+
);
2330

2431
export const CreateOrganization = (props: CreateOrganizationProps) => {
2532
return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
2633
};
2734

28-
export const OrganizationProfile = (props: OrganizationProfileProps) => {
29-
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
30-
};
35+
// The assignment of OrganizationProfile with BaseOrganizationProfile props is used
36+
// to support the CustomPage functionality (eg OrganizationProfile.Page)
37+
// Also the `typeof BaseOrganizationProfile` is used to resolved the following error:
38+
// "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
39+
export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
40+
(props: OrganizationProfileProps) => {
41+
return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
42+
},
43+
{ ...BaseOrganizationProfile },
44+
);
3145

3246
export const SignIn = (props: SignInProps) => {
3347
const { signInUrl } = useClerkRemixOptions();

0 commit comments

Comments
 (0)