Update dependency vite to v8 (#32866)

* Update dependency vite to v8

* Update vitest.config.ts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Vite 8 migration

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

packages/shared-components/package.json

@@ -111,7 +111,7 @@
         "typedoc-plugin-markdown": "^4.9.0",
         "typedoc-plugin-missing-exports": "^4.1.2",
         "typescript": "catalog:",
-        "vite": "^7.3.1",
+        "vite": "^8.0.0",
         "vite-plugin-dts": "^4.5.4",
         "vite-plugin-node-polyfills": "^0.25.0",
         "vitest": "^4.0.18",

packages/shared-components/vite.config.ts

@@ -8,7 +8,7 @@
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import dts from "vite-plugin-dts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -22,22 +22,20 @@ export default defineConfig({
             fileName: "element-web-shared-components",
         },
         outDir: "dist",
-        rollupOptions: {
+        rolldownOptions: {
             // make sure to externalize deps that shouldn't be bundled
             // into your library
-            external: [
-                "react",
-                "react-dom",
-                "@vector-im/compound-design-tokens",
-                "@vector-im/compound-web",
-                "react-virtuoso",
+            external: ["@vector-im/compound-design-tokens", "@vector-im/compound-web", "react-virtuoso"],
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react", "react-dom"],
+                }),
             ],
             output: {
                 // Provide global variables to use in the UMD build
                 // for externalized deps
                 globals: {
                     "react": "react",
-                    "react-dom": "ReactDom",
                     "@vector-im/compound-design-tokens": "compoundDesignTokens",
                     "@vector-im/compound-web": "compoundWeb",
                     "react-virtuoso": "reactVirtuoso",

packages/shared-components/vitest.config.ts

@@ -5,20 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig } from "vitest/config";
+import { defineConfig, ViteUserConfig } from "vitest/config";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { storybookVis } from "storybook-addon-vis/vitest-plugin";
 import { playwright, PlaywrightProviderOptions } from "@vitest/browser-playwright";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { InlineConfig } from "vite";
 import { Reporter } from "vitest/reporters";
 import { env } from "process";
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
-const reporters: NonNullable<InlineConfig["test"]>["reporters"] = [["default"]];
+const reporters: NonNullable<ViteUserConfig["test"]>["reporters"] = [["default"]];
 const slowTestReporter: Reporter = {
     onTestRunEnd(testModules, unhandledErrors, reason) {
         const tests = testModules
@@ -127,7 +126,8 @@ export default defineConfig({
             },
             {
                 extends: true,
-                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } })],
+                // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
+                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
                 test: {
                     name: "unit",
                     browser: {