Upgrade Vite to v8

package.json

@@ -61,10 +61,11 @@
     "oxlint": "^1.55.0",
     "playwright": "^1.58.2",
     "react-select-event": "^5.5.1",
+    "rolldown": "^1.0.0-rc.9",
     "storybook": "^10.2.14",
     "svgo": "^4.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^8.0.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",

web/.storybook/vite.config.mts

@@ -1,8 +1,10 @@
 import { defineConfig } from 'vite';
 
 import { reactPlugin } from '@gravitational/build/vite/react.mjs';
-import { tsconfigPathsPlugin } from '@gravitational/build/vite/tsconfigPaths.mjs';
 
 export default defineConfig(({ mode }) => ({
-  plugins: [tsconfigPathsPlugin(), reactPlugin(mode)],
+  resolve: {
+    tsconfigPaths: true,
+  },
+  plugins: [reactPlugin(mode)],
 }));

web/packages/build/package.json

@@ -17,15 +17,14 @@
     "@swc/core": "^1.15.18",
     "@swc/plugin-styled-components": "^12.7.0",
     "@types/jsdom": "^27.0.0",
-    "@vitejs/plugin-react-swc": "^4.2.3",
+    "@vitejs/plugin-react-swc": "^4.3.0",
     "babel-plugin-styled-components": "^2.1.4",
     "globals": "^17.4.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-fail-on-console": "^3.3.4",
     "jsdom": "^28.1.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "vite-plugin-compression2": "^2.5.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "vite-tsconfig-paths": "^6.1.1"
+    "vite-plugin-wasm": "^3.5.0"
   }
 }

web/packages/build/vite/config.ts

@@ -27,7 +27,6 @@ import wasm from 'vite-plugin-wasm';
 import { generateAppHashFile } from './apphash';
 import { htmlPlugin, transformPlugin } from './html';
 import { reactPlugin } from './react.mjs';
-import { tsconfigPathsPlugin } from './tsconfigPaths.mjs';
 
 const DEFAULT_PROXY_TARGET = '127.0.0.1:3080';
 const ENTRY_FILE_NAME = 'app/app.js';
@@ -65,11 +64,33 @@ export function createViteConfig(
         host: '0.0.0.0',
         port: 3000,
       },
+      resolve: {
+        tsconfigPaths: true,
+      },
       build: {
         outDir: outputDirectory,
         assetsDir: 'app',
         emptyOutDir: true,
-        rollupOptions: {
+        reportCompressedSize: false,
+        rolldownOptions: {
+          checks: {
+            // We don't really need rolldown to complain about react/assets/wasm taking a "long"
+            // time - the entire build takes ~7s with compression, which is plenty fast.
+            pluginTimings: false,
+          },
+          onLog(level, log, defaultHandler) {
+            // Suppress direct eval warning from @protobufjs/inquire.
+            // The eval is intentional (to call require without bundler detection) and patching
+            // it to indirect eval would break Electron's module-scoped require.
+            if (
+              log.code === 'EVAL' &&
+              log.id?.includes('@protobufjs/inquire')
+            ) {
+              return;
+            }
+
+            defaultHandler(level, log);
+          },
           output: {
             // removes hashing from our entry point file.
             entryFileNames: ENTRY_FILE_NAME,
@@ -98,7 +119,6 @@ export function createViteConfig(
       },
       plugins: [
         reactPlugin(mode),
-        tsconfigPathsPlugin(),
         transformPlugin(),
         generateAppHashFile(outputDirectory, ENTRY_FILE_NAME),
         wasm(),

web/packages/build/vite/gen-event-reference-config.mts

@@ -2,8 +2,6 @@ import path from 'node:path';
 
 import { defineConfig } from 'vite';
 
-import { tsconfigPathsPlugin } from './tsconfigPaths.mjs';
-
 const rootDirectory = path.resolve(
   __dirname,
   '../../teleport/src/services/audit/gen-event-reference'
@@ -14,7 +12,9 @@ const outputDirectory = path.resolve(
 );
 
 export default defineConfig(() => ({
-  plugins: [tsconfigPathsPlugin()],
+  resolve: {
+    tsconfigPaths: true,
+  },
   build: {
     outDir: outputDirectory,
     minify: false,
@@ -26,7 +26,7 @@ export default defineConfig(() => ({
       entry: path.resolve(rootDirectory, 'index.ts'),
       formats: ['cjs' as const],
     },
-    rollupOptions: {
+    rolldownOptions: {
       external: ['node:fs'],
     },
   },

web/packages/shared/components/TextEditor/TextEditor.jsx

@@ -16,11 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import ace from 'ace-builds/src-min-noconflict/ace';
-import 'ace-builds/src-noconflict/ext-searchbox';
-import 'ace-builds/src-noconflict/mode-json';
-import 'ace-builds/src-noconflict/mode-terraform.js';
-import 'ace-builds/src-noconflict/mode-yaml';
 import { Component } from 'react';
 import styled from 'styled-components';
 
@@ -30,6 +25,8 @@ import { Copy, Download } from 'design/Icon';
 import { copyToClipboard } from 'design/utils/copyToClipboard';
 import { downloadObject } from 'shared/utils/download';
 
+import ace from './ace';
+import './ace-includes';
 import StyledTextEditor from './StyledTextEditor';
 
 const { UndoManager } = ace.require('ace/undomanager');

web/packages/shared/components/TextEditor/ace-includes.js

@@ -0,0 +1,27 @@
+/*
+ * Teleport
+ * Copyright (C) 2026  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// These are in a separate file that is imported after ace.js, so that we can
+// ensure that `ace` is defined as a global.
+// Importing them directly from TextEditor.jsx would result in oxfmt rearranging
+// the imports and putting these above the ace import, which would then cause them
+// to fail to load.
+import 'ace-builds/src-noconflict/ext-searchbox';
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/mode-terraform.js';
+import 'ace-builds/src-noconflict/mode-yaml';

web/packages/build/vite/tsconfigPaths.mjs → web/packages/shared/components/TextEditor/ace.js

@@ -1,6 +1,6 @@
-/**
+/*
  * Teleport
- * Copyright (C) 2024 Gravitational, Inc.
+ * Copyright (C) 2026  Gravitational, Inc.
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,20 +16,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/**
- * This needs to be an .mjs file,
- * because Vite can't import .ts files from a workspace out of the box.
- * https://github.com/vitejs/vite/issues/5370
- */
-
-import path from 'node:path';
-
-import tsconfigPaths from 'vite-tsconfig-paths';
+import ace from 'ace-builds/src-min-noconflict/ace';
 
-const rootDirectory = path.resolve(import.meta.dirname, '../../../..');
+// Ace extension and mode files (e.g. mode-json.js, ext-searchbox.js) reference
+// `ace` as a bare global identifier (`ace.define(...)`). The ace.js IIFE tries
+// to set `window.ace` via `(function(){ return this })()`, but Vite 8's bundler
+// (Rolldown) can drop or scope that assignment. Explicitly assign it here so
+// that subsequently-evaluated extension modules can resolve the bare `ace` ref.
+globalThis.ace = ace;
 
-export function tsconfigPathsPlugin() {
-  return tsconfigPaths({
-    root: rootDirectory,
-  });
-}
+export default ace;

web/packages/teleport/src/Audit/fixtures/index.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { makeEvent } from 'teleport/services/audit';
+import makeEvent from 'teleport/services/audit/makeEvent';
 
 // events contains sample JSON's of ALL supported event types
 export const events = [

web/packages/teleport/src/boot.tsx

@@ -18,7 +18,6 @@
 
 import { createRoot } from 'react-dom/client';
 
-import 'teleport/lib/polyfillRandomUuid';
 import cfg from './config';
 import { KeysEnum } from './services/storageService';
 import Teleport from './Teleport';