fix(clerk-js,chrome-extension): Stripe bundles (#5597)

Author: tmilewski

.changeset/open-cases-happen.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': patch
+---
+
+Externalize all Stripe-related modules

.changeset/slick-taxis-cut.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fully strip @stripe/stripe-js from non-RHC builds

packages/chrome-extension/tsup.config.ts

@@ -17,7 +17,7 @@ export default defineConfig(overrideOptions => {
     legacyOutput: true,
     treeshake: true,
     noExternal: ['@clerk/clerk-react', '@clerk/shared'],
-    external: ['use-sync-external-store'],
+    external: ['use-sync-external-store', '@stripe/stripe-js', '@stripe/react-stripe-js'],
     define: {
       PACKAGE_NAME: `"${name}"`,
       PACKAGE_VERSION: `"${version}"`,

packages/clerk-js/rspack.config.js

@@ -405,11 +405,27 @@ const prodConfig = ({ mode, env, analysis }) => {
     },
   });
 
+  /** @type { () => (import('@rspack/core').Configuration) } */
+  const commonForNoRHC = () => ({
+    plugins: [
+      new rspack.IgnorePlugin({
+        resourceRegExp: /^@stripe\/stripe-js$/,
+      }),
+      new rspack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    ],
+    optimization: {
+      splitChunks: false,
+    },
+  });
+
   const clerkEsmNoRHC = merge(
     entryForVariant(variants.clerkNoRHC),
     common({ mode, disableRHC: true }),
     commonForProd(),
     commonForProdBundled(),
+    commonForNoRHC(),
     {
       experiments: {
         outputModule: true,
@@ -418,17 +434,6 @@ const prodConfig = ({ mode, env, analysis }) => {
         filename: '[name].mjs',
         libraryTarget: 'module',
       },
-      plugins: [
-        // Include the lazy chunks in the bundle as well
-        // so that the final bundle can be imported and bundled again
-        // by a different bundler, eg the webpack instance used by react-scripts
-        new rspack.optimize.LimitChunkCountPlugin({
-          maxChunks: 1,
-        }),
-      ],
-      optimization: {
-        splitChunks: false,
-      },
     },
   );
 
@@ -437,22 +442,12 @@ const prodConfig = ({ mode, env, analysis }) => {
     common({ mode, disableRHC: true }),
     commonForProd(),
     commonForProdBundled(),
+    commonForNoRHC(),
     {
       output: {
         filename: '[name].js',
         libraryTarget: 'commonjs',
       },
-      plugins: [
-        // Include the lazy chunks in the bundle as well
-        // so that the final bundle can be imported and bundled again
-        // by a different bundler, eg the webpack instance used by react-scripts
-        new rspack.optimize.LimitChunkCountPlugin({
-          maxChunks: 1,
-        }),
-      ],
-      optimization: {
-        splitChunks: false,
-      },
     },
   );
 

scripts/search-for-rhc.mjs

@@ -10,11 +10,12 @@ import { $, argv } from 'zx';
 const targetType = argv._[0]; // file | directory
 const target = argv._[1]; // Target of the resource
 
-async function asyncSearchRHC(name, search) {
+async function asyncSearchRHC(name, search, regex = false) {
+  const flag = regex ? 'E' : 'F';
   const cmd = () =>
     targetType === 'directory'
-      ? $`grep -rFq --include=\\*.js --include=\\*.mjs "${search}" ${target}`
-      : $`grep -Fq "${search}" ${target}`;
+      ? $`grep -${flag}q --include=\\*.js --include=\\*.mjs ${search} ${target}`
+      : $`grep -${flag}q ${search} ${target}`;
 
   if ((await cmd().exitCode) === 0) {
     throw new Error(`Found ${name} related RHC in build output. (Search: \`${search}\`)`);
@@ -28,6 +29,7 @@ await Promise.allSettled([
   asyncSearchRHC('clerk-js Hotloading', '/npm/@clerk/clerk-js'),
   asyncSearchRHC('Google One Tap', 'accounts.google.com/gsi/client'),
   asyncSearchRHC('Stripe', 'js.stripe.com'),
+  asyncSearchRHC('Stripe import', 'import\s*"@stripe/stripe-js', true), // eslint-disable-line no-useless-escape
 ]).then(results => {
   const errors = results.filter(result => result.status === 'rejected').map(result => result.reason.message);