diff --git a/.changeset/common-melons-camp.md b/.changeset/common-melons-camp.md
new file mode 100644
index 00000000000..07b2ea6aaf5
--- /dev/null
+++ b/.changeset/common-melons-camp.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix lazy-loading of `BillingPage` in `UserProfile`
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
index 53d73a69de2..7a3a49f907d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
@@ -7,6 +7,12 @@ import { Route, Switch } from '../../router';
 import { AccountPage } from './AccountPage';
 import { SecurityPage } from './SecurityPage';
 
+const BillingPage = lazy(() =>
+  import(/* webpackChunkName: "up-billing-page"*/ './BillingPage').then(module => ({
+    default: module.BillingPage,
+  })),
+);
+
 export const UserProfileRoutes = () => {
   const { pages } = useUserProfileContext();
   const { experimental } = useOptions();
@@ -15,12 +21,6 @@ export const UserProfileRoutes = () => {
   const isSecurityPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.SECURITY;
   const isBillingPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.BILLING;
 
-  const BillingPage = lazy(() =>
-    import(/* webpackChunkName: "up-billing-page"*/ './BillingPage').then(module => ({
-      default: module.BillingPage,
-    })),
-  );
-
   const customPageRoutesWithContents = pages.contents?.map((customPage, index) => {
     const shouldFirstCustomItemBeOnRoot = !isAccountPageRoot && !isSecurityPageRoot && index === 0;
     return (