diff --git a/packages/html-reporter/bundle.ts b/packages/html-reporter/bundle.ts
index 73408e5ce2..67bb7aa45d 100644
--- a/packages/html-reporter/bundle.ts
+++ b/packages/html-reporter/bundle.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import fs, { existsSync } from 'fs';
-import path from 'path';
+import * as fs from 'fs';
+import * as path from 'path';
 import type { Plugin, UserConfig } from 'vite';
 
 export function bundle(): Plugin {
@@ -26,7 +26,7 @@ export function bundle(): Plugin {
       config = c;
     },
     transformIndexHtml: {
-      transform(html, ctx) {
+      handler(html, ctx) {
         if (!ctx || !ctx.bundle)
           return html;
         html = html.replace(/(?=<!--)([\s\S]*?)-->/, '');
@@ -42,7 +42,7 @@ export function bundle(): Plugin {
       },
     },
     closeBundle: () => {
-      if (existsSync(path.join(config.build!.outDir!, 'index.html'))) {
+      if (fs.existsSync(path.join(config.build!.outDir!, 'index.html'))) {
         const targetDir = path.join(__dirname, '..', 'playwright-core', 'lib', 'vite', 'htmlReport');
         fs.mkdirSync(targetDir, { recursive: true });
         fs.copyFileSync(
diff --git a/packages/html-reporter/package.json b/packages/html-reporter/package.json
index 62d5d95bfd..bdd0485a07 100644
--- a/packages/html-reporter/package.json
+++ b/packages/html-reporter/package.json
@@ -2,6 +2,7 @@
   "name": "html-reporter",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",
diff --git a/packages/html-reporter/tsconfig.node.json b/packages/html-reporter/tsconfig.node.json
index e993792cb1..df9b7a8a50 100644
--- a/packages/html-reporter/tsconfig.node.json
+++ b/packages/html-reporter/tsconfig.node.json
@@ -4,5 +4,5 @@
     "module": "esnext",
     "moduleResolution": "node"
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "bundle.ts"]
 }
diff --git a/packages/recorder/package.json b/packages/recorder/package.json
index 0641d13367..8482a7a7db 100644
--- a/packages/recorder/package.json
+++ b/packages/recorder/package.json
@@ -2,6 +2,7 @@
   "name": "recorder",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",
diff --git a/packages/trace-viewer/bundle.js b/packages/trace-viewer/bundle.ts
similarity index 86%
rename from packages/trace-viewer/bundle.js
rename to packages/trace-viewer/bundle.ts
index f751f76c5c..eaf09a6cc3 100644
--- a/packages/trace-viewer/bundle.js
+++ b/packages/trace-viewer/bundle.ts
@@ -14,23 +14,18 @@
  * limitations under the License.
  */
 
-/**
- * @returns {import('vite').Plugin}
- */
-export function bundle() {
-  let config;
+import type { Plugin } from 'vite';
+
+export function bundle(): Plugin {
   return {
     name: 'playwright-bundle',
-    config(c) {
-      config = c;
-    },
     transformIndexHtml: {
-      transform(html, ctx) {
+      handler(html, ctx) {
         if (!ctx || !ctx.bundle)
           return html;
         // Workaround vite issue that we cannot exclude some scripts from preprocessing.
         return html.replace(/(?=<!--)([\s\S]*?)-->/, '').replace('<!-- <script src="stall.js"></script> -->', '<script src="stall.js"></script>');
       },
     },
-  }
+  };
 }
\ No newline at end of file
diff --git a/packages/trace-viewer/package.json b/packages/trace-viewer/package.json
index 069d430495..e1b745bf83 100644
--- a/packages/trace-viewer/package.json
+++ b/packages/trace-viewer/package.json
@@ -2,6 +2,7 @@
   "name": "trace-viewer",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",
diff --git a/packages/trace-viewer/tsconfig.node.json b/packages/trace-viewer/tsconfig.node.json
index e993792cb1..df9b7a8a50 100644
--- a/packages/trace-viewer/tsconfig.node.json
+++ b/packages/trace-viewer/tsconfig.node.json
@@ -4,5 +4,5 @@
     "module": "esnext",
     "moduleResolution": "node"
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "bundle.ts"]
 }
diff --git a/packages/trace-viewer/vite.config.ts b/packages/trace-viewer/vite.config.ts
index a051466a94..eaea0ee95b 100644
--- a/packages/trace-viewer/vite.config.ts
+++ b/packages/trace-viewer/vite.config.ts
@@ -16,7 +16,6 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-// @ts-ignore
 import { bundle } from './bundle';
 import * as path from 'path';
 
diff --git a/packages/trace-viewer/vite.sw.config.ts b/packages/trace-viewer/vite.sw.config.ts
index 28d771c0f9..ece81d28e5 100644
--- a/packages/trace-viewer/vite.sw.config.ts
+++ b/packages/trace-viewer/vite.sw.config.ts
@@ -16,7 +16,6 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-// @ts-ignore
 import { bundle } from './bundle';
 import * as path from 'path';