Support Vite 8 in the setup guide and example app (#486)

* Upgrade vite-app example to Vite 8

@vitejs/plugin-react@6 no longer runs Babel, so the react-strict-dom
preset now runs through vite-plugin-babel with an explicit include that
also covers example-ui. Switch to the native resolve.tsconfigPaths and
optimizeDeps.rolldownOptions, and drop vite-tsconfig-paths.

* Update Vite setup guide for Vite 8

Lead with the Vite 8 setup and keep Vite 7 below as just the differences.
Explain why the preset must run through vite-plugin-babel when
@vitejs/plugin-react@6 drops Babel.

---------

Co-authored-by: Yamin Yassin <Yamin.Yassin+CAG@cagtechhub.com>

Author: yaminyassin

apps/vite-app/package.json

@@ -13,23 +13,22 @@
     "example-ui": "0.0.55",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "vite-plugin-babel": "^1.3.2",
+    "vite-plugin-babel": "^1.7.1",
     "react-strict-dom": "0.0.55"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.22",
-    "vite-tsconfig-paths": "^5.1.4",
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "vite": "^8.0.13"
   }
 }

apps/vite-app/postcss.config.js

@@ -4,10 +4,11 @@ export default {
   plugins: {
     'react-strict-dom/postcss-plugin': {
       include: [
-        'src/**/*.{js,jsx,ts,tsx}',
-        '../../node_modules/example-ui/**/*.jsx'
+        'src/**/*.{js,jsx,mjs,ts,tsx}',
+        '../../node_modules/example-ui/**/*.{js,jsx,mjs}'
       ],
-      babelConfig
+      babelConfig,
+      useLayers: true
     },
     autoprefixer: {}
   }

apps/vite-app/vite.config.ts

@@ -1,30 +1,45 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tsConfigPaths from "vite-tsconfig-paths";
-import babel from "vite-plugin-babel";
+import viteReact from "@vitejs/plugin-react";
+import viteBabel from "vite-plugin-babel";
 
 const webOnlyExtensions = [".web.js", ".web.jsx", ".web.ts", ".web.tsx"];
+const allExtensions = [
+  ...webOnlyExtensions,
+  ".mjs",
+  ".js",
+  ".mts",
+  ".ts",
+  ".jsx",
+  ".tsx",
+  ".json",
+];
+
+// On Vite 8, @vitejs/plugin-react@6 no longer runs Babel, so vite-plugin-babel
+// must apply react-strict-dom/babel-preset to app source and to any package
+// that ships React Strict DOM UI (here, example-ui).
+const babelInclude = [
+  /[\\/]src[\\/]/,
+  /[\\/]example-ui[\\/]/,
+  /[\\/]react-strict-dom[\\/]/,
+];
 
 export default defineConfig(() => ({
-  resolve: {
-    extensions: [
-      ...webOnlyExtensions,
-      ".mjs",
-      ".js",
-      ".mts",
-      ".ts",
-      ".jsx",
-      ".tsx",
-      ".json",
-    ],
-  },
   plugins: [
-    tsConfigPaths(),
-    react({
-      babel: {
-        configFile: true,
-      },
+    viteReact(),
+    viteBabel({
+      include: babelInclude,
+      filter: /\.[cm]?[jt]sx?$/,
     }),
-    babel(),
   ],
+  resolve: {
+    // Native in Vite 8 — replaces the vite-tsconfig-paths plugin.
+    tsconfigPaths: true,
+    extensions: allExtensions,
+  },
+  optimizeDeps: {
+    // Vite 8's dependency optimizer is Rolldown, not esbuild.
+    rolldownOptions: {
+      resolve: { extensions: allExtensions },
+    },
+  },
 }));