Upgrade to Vite version 4 (#4394)

.github/dependabot.yml

@@ -9,11 +9,6 @@ updates:
       interval: weekly
     labels:
       - area/dependencies
-    ignore:
-      - dependency-name: vite
-        update-types: ["version-update:semver-major"]
-      - dependency-name: "@vitejs/plugin-react"
-        update-types: ["version-update:semver-major"]
   - package-ecosystem: maven
     directory: keycloak-theme
     open-pull-requests-limit: 999

apps/account-ui/package.json

@@ -24,8 +24,8 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^2.2.0",
-    "vite": "^3.2.5",
+    "@vitejs/plugin-react-swc": "^3.1.0",
+    "vite": "^4.1.1",
     "vite-plugin-checker": "^0.5.5"
   },
   "wireit": {

apps/account-ui/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
 import { checker } from "vite-plugin-checker";
 
 // https://vitejs.dev/config/
@@ -14,7 +14,6 @@ export default defineConfig({
   resolve: {
     // Resolve the 'module' entrypoint at all times (not the default due to Node.js compatibility issues).
     mainFields: ["module"],
-    dedupe: ["react", "react-dom"],
   },
   plugins: [react(), checker({ typescript: true })],
 });

apps/admin-ui/package.json

@@ -96,12 +96,12 @@
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react-swc": "^3.1.0",
     "cypress": "^12.5.1",
     "jsdom": "^21.1.0",
     "ldap-server-mock": "^6.0.1",
     "ts-node": "^10.9.1",
-    "vite": "^3.2.5",
+    "vite": "^4.1.1",
     "vite-plugin-checker": "^0.5.5",
     "vitest": "^0.28.5"
   }

apps/admin-ui/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
 import { checker } from "vite-plugin-checker";
 
 // https://vitejs.dev/config/
@@ -11,11 +11,14 @@ export default defineConfig({
   build: {
     sourcemap: true,
     target: "ES2022",
+    // Code splitting results in broken CSS for production builds.
+    // This is due to an unknown bug, presumably in Rollup.
+    // TODO: Revisit if we can re-enable this in the future.
+    cssCodeSplit: false,
   },
   resolve: {
     // Resolve the 'module' entrypoint at all times (not the default due to Node.js compatibility issues).
     mainFields: ["module"],
-    dedupe: ["react", "react-dom"],
   },
   plugins: [react(), checker({ typescript: true })],
   test: {

libs/keycloak-masthead/package.json

@@ -49,9 +49,9 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react-swc": "^3.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "vite": "^3.2.5",
+    "vite": "^4.1.1",
     "vite-plugin-checker": "^0.5.5",
     "vite-plugin-dts": "^1.7.3"
   }

libs/keycloak-masthead/vite.config.ts

@@ -1,4 +1,4 @@
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
 import path from "node:path";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import { defineConfig } from "vite";

libs/ui-shared/package.json

@@ -43,9 +43,9 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react-swc": "^3.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "vite": "^3.2.5",
+    "vite": "^4.1.1",
     "vite-plugin-checker": "^0.5.5",
     "vite-plugin-dts": "^1.7.3"
   }

libs/ui-shared/vite.config.ts

@@ -1,4 +1,4 @@
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
 import path from "node:path";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import { defineConfig } from "vite";