chore(clerk-js): Avoid bundling swr in the main chunk (#5551)

Author: panteliselef

.changeset/true-tables-sleep.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "590kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "72.5KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "96KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "35KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "98KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "36KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/Components.tsx

@@ -1,4 +1,3 @@
-import { useSafeLayoutEffect } from '@clerk/shared/react';
 import { createDeferredPromise } from '@clerk/shared/utils';
 import type {
   __experimental_CheckoutProps,
@@ -48,6 +47,11 @@ import {
 } from './lazyModules/providers';
 import type { AvailableComponentProps } from './types';
 
+/**
+ * Avoid importing from `@clerk/shared/react` to prevent extra dependencies being added to the bundle.
+ */
+export const useSafeLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 const ROOT_ELEMENT_ID = 'clerk-components';
 
 export type ComponentControls = {

packages/clerk-js/src/ui/elements/Drawer.tsx

@@ -1,4 +1,4 @@
-import { useSafeLayoutEffect } from '@clerk/shared/react/index';
+import { useSafeLayoutEffect } from '@clerk/shared/react';
 import type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';
 import {
   FloatingFocusManager,