dynamically import playwright stuff

apps/web/src/api/server-functions/browser-login.ts

@@ -1,4 +1,4 @@
-import { type Browser, chromium, type Page } from 'playwright';
+import type { Browser, Page } from 'playwright';
 import { env } from '@/env';
 import { getSupabaseServerClient } from '@/integrations/supabase/server';
 
@@ -47,6 +47,7 @@ export const browserLogin = async <T = Buffer<ArrayBufferLike>>({
     user: user,
   };
 
+  const { chromium } = await import('playwright');
   const browser = await chromium.launch();
 
   try {

apps/web/src/router.tsx

@@ -1,8 +1,7 @@
 import type { AssetType } from '@buster/server-shared/assets';
 import type { QueryClient } from '@tanstack/react-query';
-import { createRouter, createRouter as createTanstackRouter } from '@tanstack/react-router';
+import { createRouter } from '@tanstack/react-router';
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
-import { routerWithQueryClient } from '@tanstack/react-router-with-query';
 import {
   LazyCatchErrorCard,
   LazyGlobalErrorCard,
@@ -16,46 +15,18 @@ export interface AppRouterContext {
   queryClient: QueryClient;
 }
 
-// Create a new router instance
-// export const createRouter = () => {
-//   const queryClient = TanstackQuery.getQueryClient();
-
-//   const router = routerWithQueryClient(
-//     createTanstackRouter({
-//       routeTree,
-//       context: { queryClient },
-//       scrollRestoration: true,
-//       defaultPreload: 'intent',
-//       defaultPendingComponent: FileIndeterminateLoader,
-//       defaultErrorComponent: LazyGlobalErrorCard,
-//       defaultNotFoundComponent: NotFoundCard,
-//       defaultOnCatch: LazyCatchErrorCard,
-//       Wrap: (props) => {
-//         return (
-//           <TanstackQuery.Provider queryClient={queryClient}>
-//             {props.children}
-//           </TanstackQuery.Provider>
-//         );
-//       },
-//     }),
-//     queryClient
-//   );
-
-//   return router;
-// };
-
 export function getRouter() {
   const queryClient = TanstackQuery.getQueryClient();
 
   const router = createRouter({
     routeTree,
     context: { queryClient },
-    defaultPreload: 'intent',
     scrollRestoration: true,
     defaultPendingComponent: FileIndeterminateLoader,
     defaultErrorComponent: LazyGlobalErrorCard,
     defaultNotFoundComponent: NotFoundCard,
     defaultOnCatch: LazyCatchErrorCard,
+    defaultPreload: 'intent',
   });
   setupRouterSsrQueryIntegration({
     router,

apps/web/src/routes/screenshots/chats.$chatId.index.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
-import { browserLogin } from '@/api/server-functions/browser-login';
 import { createScreenshotResponse } from '@/api/server-functions/screenshot-helpers';
 import { createHrefFromLink } from '@/lib/routes';
 
@@ -24,6 +23,7 @@ export const Route = createFileRoute('/screenshots/chats/$chatId/')({
         );
 
         try {
+          const { browserLogin } = await import('@/api/server-functions/browser-login');
           const { result: screenshotBuffer } = await browserLogin({
             width,
             height,

apps/web/src/routes/screenshots/dashboards.$dashboardId.index.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
-import { browserLogin } from '@/api/server-functions/browser-login';
 import { createScreenshotResponse } from '@/api/server-functions/screenshot-helpers';
 import { createHrefFromLink } from '@/lib/routes';
 
@@ -25,6 +24,7 @@ export const Route = createFileRoute('/screenshots/dashboards/$dashboardId/')({
         );
 
         try {
+          const { browserLogin } = await import('@/api/server-functions/browser-login');
           const { result: screenshotBuffer } = await browserLogin({
             width,
             height,

apps/web/src/routes/screenshots/metrics.$metricId.index.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod';
-import { browserLogin } from '@/api/server-functions/browser-login';
 import { createScreenshotResponse } from '@/api/server-functions/screenshot-helpers';
 import { createHrefFromLink } from '@/lib/routes';
 
@@ -25,6 +24,7 @@ export const Route = createFileRoute('/screenshots/metrics/$metricId/')({
         );
 
         try {
+          const { browserLogin } = await import('@/api/server-functions/browser-login');
           const { result: screenshotBuffer } = await browserLogin({
             width,
             height,

apps/web/vite.config.ts

@@ -38,6 +38,9 @@ const config = defineConfig(({ command, mode }) => {
       'import.meta.env.VITE_BUILD_ID': JSON.stringify(buildId),
       'import.meta.env.VITE_BUILD_AT': JSON.stringify(buildAt),
     },
+    optimizeDeps: {
+      exclude: ['playwright', 'playwright-core', 'chromium-bidi'],
+    },
     plugins: [
       // this is the plugin that enables path aliases
       viteTsConfigPaths({ projects: ['./tsconfig.json'] }),