fix(clerk-js): Dynamically load Web3WalletButtons

Author: dstaley

packages/clerk-js/bundlewatch.config.json

@@ -1,11 +1,11 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "840KB" },
+    { "path": "./dist/clerk.js", "maxSize": "918KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
     { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "119KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
@@ -16,11 +16,11 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "18KB" },
-    { "path": "./dist/signup*.js", "maxSize": "9.5KB" },
+    { "path": "./dist/signup*.js", "maxSize": "11KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "16KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
-    { "path": "./dist/onetap*.js", "maxSize": "1KB" },
+    { "path": "./dist/onetap*.js", "maxSize": "3KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },

packages/clerk-js/rspack.config.js

@@ -129,19 +129,40 @@ const common = ({ mode, variant, disableRHC = false }) => {
           signUp: {
             minChunks: 1,
             name: 'signup',
-            test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
+            test: module =>
+              !!(
+                module instanceof rspack.NormalModule &&
+                module.resource &&
+                module.resource.includes('/ui/components/SignUp')
+              ),
           },
           common: {
             minChunks: 1,
             name: 'ui-common',
             priority: -20,
-            test: module => !!(module.resource && !module.resource.includes('/ui/components')),
+            test: module =>
+              !!(
+                module instanceof rspack.NormalModule &&
+                module.resource &&
+                !module.resource.includes('/ui/components') &&
+                !module.resource.includes('node_modules')
+              ),
           },
           defaultVendors: {
             minChunks: 1,
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             priority: -10,
+            /**
+             * Only apply to initial chunks. Dependencies used exclusively by async chunks
+             * (like Solana packages and their transitive deps) will be bundled with those
+             * async chunks instead of being forced into the shared vendors bundle.
+             *
+             * This ensures that lazy-loaded features (like Web3 wallet support) don't
+             * bloat the initial bundle, and their dependencies are automatically
+             * code-split without needing explicit configuration.
+             */
+            chunks: 'initial',
           },
           react: {
             chunks: 'all',

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

@@ -1,14 +1,18 @@
 import { useClerk } from '@clerk/shared/react';
+import { lazy, Suspense } from 'react';
 
 import { withRedirectToAfterSignIn, withRedirectToSignInTask } from '@/ui/common/withRedirect';
 import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
 import { BackLink } from '@/ui/elements/BackLink';
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
-import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
 import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
+const Web3WalletButtons = lazy(() =>
+  import('@/ui/elements/Web3WalletButtons').then(m => ({ default: m.Web3WalletButtons })),
+);
+
 import { useSignInContext } from '../../contexts';
 import { useRouter } from '../../router';
 
@@ -35,20 +39,23 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
             direction='col'
             gap={4}
           >
-            <Web3WalletButtons
-              web3AuthCallback={({ walletName }) => {
-                return clerk
-                  .authenticateWithWeb3({
-                    customNavigate: router.navigate,
-                    redirectUrl: ctx.afterSignInUrl || '/',
-                    secondFactorUrl: 'factor-two',
-                    signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
-                    strategy: 'web3_solana_signature',
-                    walletName,
-                  })
-                  .catch(err => web3CallbackErrorHandler(err, card.setError));
-              }}
-            />
+            <Suspense fallback={null}>
+              <Web3WalletButtons
+                web3AuthCallback={({ walletName }) => {
+                  return clerk
+                    .authenticateWithWeb3({
+                      customNavigate: router.navigate,
+                      redirectUrl: ctx.afterSignInUrl || '/',
+                      secondFactorUrl: 'factor-two',
+                      signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
+                      strategy: 'web3_solana_signature',
+                      walletName,
+                    })
+                    .catch(err => web3CallbackErrorHandler(err, card.setError));
+                }}
+              />
+            </Suspense>
+
             <BackLink
               boxElementDescriptor={descriptors.backRow}
               linkElementDescriptor={descriptors.backLink}

packages/clerk-js/src/ui/components/SignUp/SignUpStartSolanaWalletsCard.tsx

@@ -1,14 +1,18 @@
 import { useClerk } from '@clerk/shared/react';
+import { lazy, Suspense } from 'react';
 
 import { withRedirectToAfterSignUp, withRedirectToSignUpTask } from '@/ui/common/withRedirect';
 import { descriptors, Flex, Flow, localizationKeys } from '@/ui/customizables';
 import { BackLink } from '@/ui/elements/BackLink';
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
-import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
 import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
+const Web3WalletButtons = lazy(() =>
+  import('@/ui/elements/Web3WalletButtons').then(m => ({ default: m.Web3WalletButtons })),
+);
+
 import { useSignUpContext } from '../../contexts';
 import { useRouter } from '../../router';
 
@@ -35,22 +39,24 @@ const SignUpStartSolanaWalletsCardInner = () => {
             direction='col'
             gap={4}
           >
-            <Web3WalletButtons
-              web3AuthCallback={({ walletName }) => {
-                return clerk
-                  .authenticateWithWeb3({
-                    customNavigate: router.navigate,
-                    redirectUrl: ctx.afterSignUpUrl || '/',
-                    signUpContinueUrl: '../continue',
-                    strategy: 'web3_solana_signature',
-                    unsafeMetadata: ctx.unsafeMetadata,
-                    // TODO: Add support to pass legalAccepted status
-                    // legalAccepted: ,
-                    walletName,
-                  })
-                  .catch(err => web3CallbackErrorHandler(err, card.setError));
-              }}
-            />
+            <Suspense fallback={null}>
+              <Web3WalletButtons
+                web3AuthCallback={({ walletName }) => {
+                  return clerk
+                    .authenticateWithWeb3({
+                      customNavigate: router.navigate,
+                      redirectUrl: ctx.afterSignUpUrl || '/',
+                      signUpContinueUrl: '../continue',
+                      strategy: 'web3_solana_signature',
+                      unsafeMetadata: ctx.unsafeMetadata,
+                      // TODO: Add support to pass legalAccepted status
+                      // legalAccepted: ,
+                      walletName,
+                    })
+                    .catch(err => web3CallbackErrorHandler(err, card.setError));
+                }}
+              />
+            </Suspense>
             <BackLink
               boxElementDescriptor={descriptors.backRow}
               linkElementDescriptor={descriptors.backLink}