fix(clerk-js): Fix chunk loading

Author: dstaley

packages/clerk-js/bundle-check.mjs

@@ -5,7 +5,7 @@ import path from 'node:path';
 import { pipeline } from 'node:stream';
 import zlib from 'node:zlib';
 
-import { chromium } from 'playwright';
+import { chromium } from '@playwright/test';
 
 /**
  * This script generates a CLI report detailing the gzipped size of JavaScript resources loaded by `clerk-js` for a
@@ -212,7 +212,7 @@ function report(url, responses) {
 
 /**
  * Loads the given `url` in `browser`, capturing all HTTP requests that occur.
- * @param {import('playwright').Browser} browser
+ * @param {import('@playwright/test').Browser} browser
  * @param {string} url
  */
 async function getResponseSizes(browser, url) {

packages/clerk-js/bundlewatch.config.json

@@ -1,13 +1,13 @@
 {
   "files": [
     { "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.browser.js", "maxSize": "84KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "85KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "125KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "119KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "47KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "50KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

packages/clerk-js/rspack.config.js

@@ -150,19 +150,22 @@ const common = ({ mode, variant, disableRHC = false }) => {
           },
           defaultVendors: {
             minChunks: 1,
-            test: /[\\/]node_modules[\\/]/,
+            test: module => {
+              if (!(module instanceof rspack.NormalModule) || !module.resource) {
+                return false;
+              }
+              // Exclude Solana packages and their known transitive dependencies
+              if (
+                /[\\/]node_modules[\\/](@solana|@solana-mobile|@wallet-standard|bn\.js|borsh|buffer|superstruct|bs58|jayson|rpc-websockets|qrcode)[\\/]/.test(
+                  module.resource,
+                )
+              ) {
+                return false;
+              }
+              return /[\\/]node_modules[\\/]/.test(module.resource);
+            },
             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

@@ -10,7 +10,9 @@ import { Header } from '@/ui/elements/Header';
 import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
 const Web3WalletButtons = lazy(() =>
-  import('@/ui/elements/Web3WalletButtons').then(m => ({ default: m.Web3WalletButtons })),
+  import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3WalletButtons').then(m => ({
+    default: m.Web3WalletButtons,
+  })),
 );
 
 import { useSignInContext } from '../../contexts';

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

@@ -10,7 +10,9 @@ import { Header } from '@/ui/elements/Header';
 import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
 const Web3WalletButtons = lazy(() =>
-  import('@/ui/elements/Web3WalletButtons').then(m => ({ default: m.Web3WalletButtons })),
+  import(/* webpackChunkName: "web3-wallet-buttons" */ '@/ui/elements/Web3WalletButtons').then(m => ({
+    default: m.Web3WalletButtons,
+  })),
 );
 
 import { useSignUpContext } from '../../contexts';