chore: update @vitejs/plugin-react to 6.0.0

apps/web/package.json

@@ -42,18 +42,20 @@
   },
   "devDependencies": {
     "@effect/language-service": "catalog:",
+    "@rolldown/plugin-babel": "^0.2.0",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/router-plugin": "^1.161.0",
+    "@types/babel__core": "^7.20.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.0",
     "@vitest/browser-playwright": "^4.0.18",
     "babel-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
     "msw": "^2.12.10",
     "playwright": "^1.58.2",
     "tailwindcss": "^4.0.0",
     "typescript": "catalog:",
-    "vite": "^8.0.0-beta.12",
+    "vite": "^8.0.0",
     "vitest": "catalog:",
     "vitest-browser-react": "^2.0.5"
   }

apps/web/vite.config.ts

@@ -1,8 +1,9 @@
 import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
+import react, { reactCompilerPreset } from "@vitejs/plugin-react";
+import babel from "@rolldown/plugin-babel";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import { defineConfig } from "vite";
-import { version } from "./package.json" with { type: "json" };
+import pkg from "./package.json" with { type: "json" };
 
 const port = Number(process.env.PORT ?? 5733);
 const sourcemapEnv = process.env.T3CODE_WEB_SOURCEMAP?.trim().toLowerCase();
@@ -17,10 +18,14 @@ const buildSourcemap =
 export default defineConfig({
   plugins: [
     tanstackRouter(),
-    react({
-      babel: {
-        plugins: [["babel-plugin-react-compiler", { target: "19" }]],
-      },
+    react(),
+    babel({
+      // We need to be explicit about the parser options after moving to @vitejs/plugin-react v6.0.0
+      // This is because the babel plugin only automatically parses typescript and jsx based on relative paths (e.g. "**/*.ts")
+      // whereas the previous version of the plugin parsed all files with a .ts extension.
+      // This is causing our packages/ directory to fail to parse, as they are not relative to the CWD.
+      parserOpts: { plugins: ["typescript", "jsx"] },
+      presets: [reactCompilerPreset()],
     }),
     tailwindcss(),
   ],
@@ -30,7 +35,7 @@ export default defineConfig({
   define: {
     // In dev mode, tell the web app where the WebSocket server lives
     "import.meta.env.VITE_WS_URL": JSON.stringify(process.env.VITE_WS_URL ?? ""),
-    "import.meta.env.APP_VERSION": JSON.stringify(version),
+    "import.meta.env.APP_VERSION": JSON.stringify(pkg.version),
   },
   resolve: {
     tsconfigPaths: true,