diff --git a/modules/banner/element-web/package.json b/modules/banner/element-web/package.json
index 6de5f92bce..c9a36d3b84 100644
--- a/modules/banner/element-web/package.json
+++ b/modules/banner/element-web/package.json
@@ -23,9 +23,9 @@
         "react": "19.2.6",
         "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "^6.0.0",
-        "vite": "^7.3.2",
+        "vite": "^8.0.0",
         "vite-plugin-node-polyfills": "^0.28.0",
-        "vite-plugin-svgr": "^4.3.0"
+        "vite-plugin-svgr": "^5.0.0"
     },
     "dependencies": {
         "@radix-ui/react-dialog": "^1.1.6",
diff --git a/modules/banner/element-web/vite.config.ts b/modules/banner/element-web/vite.config.ts
index d7ae139b11..e2ee02eaa2 100644
--- a/modules/banner/element-web/vite.config.ts
+++ b/modules/banner/element-web/vite.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
@@ -27,8 +27,18 @@ export default defineConfig({
         outDir: "lib",
         target: "esnext",
         sourcemap: true,
-        rollupOptions: {
-            external: ["react"],
+        rolldownOptions: {
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react"],
+                }),
+            ],
+            output: {
+                globals: {
+                    // Reuse React from the host app
+                    react: "window.React",
+                },
+            },
         },
     },
     plugins: [
@@ -46,6 +56,7 @@ export default defineConfig({
     define: {
         // Use production mode for the build as it is tested against production builds of Element Web,
         // this is required for React JSX versions to be compatible.
-        process: { env: { NODE_ENV: "production" } },
+        "process.env.NODE_ENV": "'production'",
+        "process": { env: { NODE_ENV: "production" } },
     },
 });
diff --git a/modules/opendesk/element-web/package.json b/modules/opendesk/element-web/package.json
index a4bc223a15..c69700b632 100644
--- a/modules/opendesk/element-web/package.json
+++ b/modules/opendesk/element-web/package.json
@@ -26,7 +26,7 @@
         "react-dom": "19.2.6",
         "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "^6.0.0",
-        "vite": "^7.3.2",
+        "vite": "^8.0.0",
         "vite-plugin-node-polyfills": "^0.28.0"
     }
 }
diff --git a/modules/opendesk/element-web/vite.config.ts b/modules/opendesk/element-web/vite.config.ts
index 8f1d83e06f..17dc4d055e 100644
--- a/modules/opendesk/element-web/vite.config.ts
+++ b/modules/opendesk/element-web/vite.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
@@ -25,8 +25,18 @@ export default defineConfig({
         outDir: "lib",
         target: "esnext",
         sourcemap: true,
-        rollupOptions: {
-            external: ["react"],
+        rolldownOptions: {
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react"],
+                }),
+            ],
+            output: {
+                globals: {
+                    // Reuse React from the host app
+                    react: "window.React",
+                },
+            },
         },
         minify: false,
     },
@@ -43,6 +53,7 @@ export default defineConfig({
     define: {
         // Use production mode for the build as it is tested against production builds of Element Web,
         // this is required for React JSX versions to be compatible.
-        process: { env: { NODE_ENV: "production" } },
+        "process.env.NODE_ENV": "'production'",
+        "process": { env: { NODE_ENV: "production" } },
     },
 });
diff --git a/modules/restricted-guests/element-web/package.json b/modules/restricted-guests/element-web/package.json
index db6e4e99f2..70d9b16709 100644
--- a/modules/restricted-guests/element-web/package.json
+++ b/modules/restricted-guests/element-web/package.json
@@ -20,7 +20,7 @@
         "react": "19.2.6",
         "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "^6.0.0",
-        "vite": "^7.3.2",
+        "vite": "^8.0.0",
         "vite-plugin-node-polyfills": "^0.28.0"
     },
     "dependencies": {
diff --git a/modules/restricted-guests/element-web/vite.config.ts b/modules/restricted-guests/element-web/vite.config.ts
index 24798ac03f..9dfdb5dbed 100644
--- a/modules/restricted-guests/element-web/vite.config.ts
+++ b/modules/restricted-guests/element-web/vite.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
@@ -26,8 +26,18 @@ export default defineConfig({
         outDir: "lib",
         target: "esnext",
         sourcemap: true,
-        rollupOptions: {
-            external: ["react"],
+        rolldownOptions: {
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react"],
+                }),
+            ],
+            output: {
+                globals: {
+                    // Reuse React from the host app
+                    react: "window.React",
+                },
+            },
         },
     },
     plugins: [
@@ -44,6 +54,7 @@ export default defineConfig({
     define: {
         // Use production mode for the build as it is tested against production builds of Element Web,
         // this is required for React JSX versions to be compatible.
-        process: { env: { NODE_ENV: "production" } },
+        "process.env.NODE_ENV": "'production'",
+        "process": { env: { NODE_ENV: "production" } },
     },
 });
diff --git a/modules/widget-lifecycle/element-web/package.json b/modules/widget-lifecycle/element-web/package.json
index d1531de023..44f50e50b3 100644
--- a/modules/widget-lifecycle/element-web/package.json
+++ b/modules/widget-lifecycle/element-web/package.json
@@ -16,9 +16,9 @@
         "@types/node": "^22.10.7",
         "@vitest/coverage-v8": "^4.0.0",
         "typescript": "^6.0.0",
-        "vite": "^7.3.2",
+        "vite": "^8.0.0",
         "vitest": "^4.0.0",
-        "vitest-sonar-reporter": "^2.0.0"
+        "vitest-sonar-reporter": "^3.0.0"
     },
     "dependencies": {
         "zod": "^4.0.0"
diff --git a/modules/widget-toggles/element-web/package.json b/modules/widget-toggles/element-web/package.json
index bf5b8de940..9e4f5d8a1d 100644
--- a/modules/widget-toggles/element-web/package.json
+++ b/modules/widget-toggles/element-web/package.json
@@ -23,13 +23,13 @@
         "@vitest/browser-playwright": "^4.0.0",
         "@vitest/coverage-v8": "^4.0.0",
         "react": "^19",
-        "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "^6.0.0",
-        "vite": "^7.1.11",
+        "rollup-plugin-external-globals": "^0.13.0",
+        "vite": "^8.0.0",
         "vite-plugin-node-polyfills": "^0.28.0",
-        "vite-plugin-svgr": "^4.3.0",
+        "vite-plugin-svgr": "^5.0.0",
         "vitest": "^4.0.0",
-        "vitest-sonar-reporter": "^2.0.0"
+        "vitest-sonar-reporter": "^3.0.0"
     },
     "dependencies": {
         "@vector-im/compound-design-tokens": "^10.0.0",
diff --git a/modules/widget-toggles/element-web/vite.config.ts b/modules/widget-toggles/element-web/vite.config.ts
index b65e3ec8ea..dc8cc37107 100644
--- a/modules/widget-toggles/element-web/vite.config.ts
+++ b/modules/widget-toggles/element-web/vite.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
@@ -27,8 +27,18 @@ export default defineConfig({
         outDir: "lib",
         target: "esnext",
         sourcemap: true,
-        rollupOptions: {
-            external: ["react"],
+        rolldownOptions: {
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react"],
+                }),
+            ],
+            output: {
+                globals: {
+                    // Reuse React from the host app
+                    react: "window.React",
+                },
+            },
         },
     },
     plugins: [
@@ -46,6 +56,7 @@ export default defineConfig({
     define: {
         // Use production mode for the build as it is tested against production builds of Element Web,
         // this is required for React JSX versions to be compatible.
-        process: { env: { NODE_ENV: "production" } },
+        "process.env.NODE_ENV": "'production'",
+        "process": { env: { NODE_ENV: "production" } },
     },
 });