fix(vite): add support for Vite 8

astro-docs/src/content/docs/technologies/build-tools/vite/introduction.mdoc

@@ -21,9 +21,9 @@ You can use Vite with Nx without the plugin and still get [task caching](/docs/f
 
 The `@nx/vite` plugin supports the following package versions.
 
-| Package | Supported Versions             |
-| ------- | ------------------------------ |
-| `vite`  | ^5.0.0 \|\| ^6.0.0 \|\| ^7.0.0 |
+| Package | Supported Versions                         |
+| ------- | ------------------------------------------ |
+| `vite`  | ^5.0.0 \|\| ^6.0.0 \|\| ^7.0.0 \|\| ^8.0.0 |
 
 [Nx generators](/docs/features/generate-code) install the latest supported versions automatically when scaffolding new projects.
 
@@ -105,7 +105,7 @@ The `@nx/vite` plugin infers tasks by reading Vite config files. Any of the foll
 Build targets are only created when the project is buildable. A project is treated as buildable when any of the following are true:
 
 - `build.lib` is set in `vite.config.*`
-- `build.rollupOptions.input` is set
+- `build.rollupOptions.input` or `build.rolldownOptions.input` is set (Vite 8 uses `rolldownOptions`)
 - `builder.buildApp` is set
 - an `index.html` file exists at the project root
 

e2e/angular/src/cypress-component-tests-app.test.ts

@@ -1,4 +1,10 @@
-import { runCLI, runE2ETests } from '@nx/e2e-utils';
+import {
+  getPackageManagerCommand,
+  runCLI,
+  runCommand,
+  runE2ETests,
+  updateJson,
+} from '@nx/e2e-utils';
 import {
   setupCypressComponentTests,
   cleanupCypressComponentTests,
@@ -10,6 +16,16 @@ describe('Angular Cypress Component Tests - App', () => {
 
   beforeAll(async () => {
     setup = setupCypressComponentTests();
+
+    // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+    // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+    updateJson('package.json', (json) => {
+      json.devDependencies ??= {};
+      json.devDependencies['vite'] = '^7.0.0';
+      json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+      return json;
+    });
+    runCommand(getPackageManagerCommand().install);
   });
 
   afterAll(() => cleanupCypressComponentTests());

e2e/angular/src/cypress-component-tests-buildable.test.ts

@@ -1,8 +1,11 @@
 import {
   checkFilesDoNotExist,
+  getPackageManagerCommand,
   runCLI,
+  runCommand,
   runE2ETests,
   updateFile,
+  updateJson,
 } from '@nx/e2e-utils';
 import {
   setupCypressComponentTests,
@@ -16,6 +19,16 @@ describe('Angular Cypress Component Tests - Buildable Lib', () => {
 
   beforeAll(async () => {
     setup = setupCypressComponentTests();
+
+    // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+    // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+    updateJson('package.json', (json) => {
+      json.devDependencies ??= {};
+      json.devDependencies['vite'] = '^7.0.0';
+      json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+      return json;
+    });
+    runCommand(getPackageManagerCommand().install);
   });
 
   afterAll(() => cleanupCypressComponentTests());

e2e/angular/src/cypress-component-tests-implicit-dep.test.ts

@@ -1,9 +1,12 @@
 import {
   checkFilesDoNotExist,
   checkFilesExist,
+  getPackageManagerCommand,
   runCLI,
+  runCommand,
   runE2ETests,
   updateFile,
+  updateJson,
 } from '@nx/e2e-utils';
 import { join } from 'path';
 import {
@@ -22,6 +25,16 @@ describe('Angular Cypress Component Tests - Implicit Dep', () => {
   beforeAll(async () => {
     setup = setupCypressComponentTests();
 
+    // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+    // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+    updateJson('package.json', (json) => {
+      json.devDependencies ??= {};
+      json.devDependencies['vite'] = '^7.0.0';
+      json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+      return json;
+    });
+    runCommand(getPackageManagerCommand().install);
+
     // Setup cypress component testing for the buildable lib
     // This is needed for the tests in this file to work
     const { appName, buildableLibName } = setup;

e2e/angular/src/cypress-component-tests-lib.test.ts

@@ -1,4 +1,10 @@
-import { runCLI, runE2ETests } from '@nx/e2e-utils';
+import {
+  getPackageManagerCommand,
+  runCLI,
+  runCommand,
+  runE2ETests,
+  updateJson,
+} from '@nx/e2e-utils';
 import {
   setupCypressComponentTests,
   cleanupCypressComponentTests,
@@ -10,6 +16,16 @@ describe('Angular Cypress Component Tests - Lib', () => {
 
   beforeAll(async () => {
     setup = setupCypressComponentTests();
+
+    // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+    // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+    updateJson('package.json', (json) => {
+      json.devDependencies ??= {};
+      json.devDependencies['vite'] = '^7.0.0';
+      json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+      return json;
+    });
+    runCommand(getPackageManagerCommand().install);
   });
 
   afterAll(() => cleanupCypressComponentTests());

e2e/angular/src/cypress-component-tests-zone-projects.test.ts

@@ -1,4 +1,10 @@
-import { runCLI, runE2ETests } from '@nx/e2e-utils';
+import {
+  getPackageManagerCommand,
+  runCLI,
+  runCommand,
+  runE2ETests,
+  updateJson,
+} from '@nx/e2e-utils';
 import {
   setupCypressComponentTests,
   cleanupCypressComponentTests,
@@ -10,6 +16,16 @@ describe('Angular Cypress Component Tests - Zone.js projects', () => {
 
   beforeAll(async () => {
     setup = setupCypressComponentTests(false);
+
+    // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+    // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+    updateJson('package.json', (json) => {
+      json.devDependencies ??= {};
+      json.devDependencies['vite'] = '^7.0.0';
+      json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+      return json;
+    });
+    runCommand(getPackageManagerCommand().install);
   });
 
   afterAll(() => cleanupCypressComponentTests());

e2e/cypress/src/cypress-legacy.test.ts

@@ -1,10 +1,13 @@
 import {
   cleanupProject,
+  getPackageManagerCommand,
   killPort,
   newProject,
   runCLI,
+  runCommand,
   runE2ETests,
   uniq,
+  updateJson,
 } from '@nx/e2e-utils';
 
 const TEN_MINS_MS = 600_000;
@@ -53,6 +56,15 @@ describe('Cypress E2E Test runner (legacy)', () => {
         `generate @nx/react:component ${appName}/src/app/btn/btn --no-interactive`,
         { env: { NX_ADD_PLUGINS: 'false' } }
       );
+      // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+      // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+      updateJson('package.json', (json) => {
+        json.devDependencies ??= {};
+        json.devDependencies['vite'] = '^7.0.0';
+        json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+        return json;
+      });
+      runCommand(getPackageManagerCommand().install);
       runCLI(
         `generate @nx/react:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`,
         { env: { NX_ADD_PLUGINS: 'false' } }

e2e/cypress/src/cypress.test.ts

@@ -3,6 +3,7 @@ import {
   checkFilesExist,
   cleanupProject,
   createFile,
+  getPackageManagerCommand,
   killPort,
   newProject,
   readJson,
@@ -12,6 +13,7 @@ import {
   tmpProjPath,
   uniq,
   updateFile,
+  updateJson,
 } from '@nx/e2e-utils';
 
 const TEN_MINS_MS = 600_000;
@@ -166,6 +168,16 @@ export default defineConfig({
       runCLI(
         `generate @nx/next:component apps/${appName}/components/btn --no-interactive`
       );
+      // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+      // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+      updateJson('package.json', (json) => {
+        json.devDependencies ??= {};
+        json.devDependencies['vite'] = '^7.0.0';
+        json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+        return json;
+      });
+      runCommand(getPackageManagerCommand().install);
+
       runCLI(
         `generate @nx/next:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
       );
@@ -194,6 +206,16 @@ export default defineConfig({
       runCLI(
         `generate @nx/angular:component apps/${appName}/src/app/btn/btn --no-interactive`
       );
+      // Cypress CT (@cypress/vite-dev-server) does not support Vite 8 yet.
+      // Downgrade the workspace to Vite 7 before configuring Cypress CT.
+      updateJson('package.json', (json) => {
+        json.devDependencies ??= {};
+        json.devDependencies['vite'] = '^7.0.0';
+        json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+        return json;
+      });
+      runCommand(getPackageManagerCommand().install);
+
       runCLI(
         `generate @nx/angular:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
       );

e2e/vite/src/vite-legacy.test.ts

@@ -142,7 +142,7 @@ export default defineConfig({
   environments: {
     ssr: {
       build: {
-        rollupOptions: {
+        rolldownOptions: {
           input: '${myApp}/src/main.server.tsx'
         }
       }
@@ -345,15 +345,25 @@ export default App;
     it('should build app from libs source', () => {
       const results = runCLI(`build ${app} --buildLibsFromSource=true`);
       expect(results).toContain('Successfully ran target build for project');
-      // this should be more modules than build from dist
-      expect(results).toContain('38 modules transformed');
-    });
+      // Get the last "N modules transformed" (the app build, not lib builds)
+      const sourceMatches = results.match(/(\d+) modules transformed/g);
+      expect(sourceMatches.length).toBeGreaterThan(0);
+      const sourceModuleCount = parseInt(
+        sourceMatches[sourceMatches.length - 1].match(/(\d+)/)[1]
+      );
 
-    it('should build app from libs dist', () => {
-      const results = runCLI(`build ${app} --buildLibsFromSource=false`);
-      expect(results).toContain('Successfully ran target build for project');
-      // this should be less modules than building from source
-      expect(results).toContain('36 modules transformed');
+      const distResults = runCLI(`build ${app} --buildLibsFromSource=false`);
+      expect(distResults).toContain(
+        'Successfully ran target build for project'
+      );
+      const distMatches = distResults.match(/(\d+) modules transformed/g);
+      expect(distMatches.length).toBeGreaterThan(0);
+      const distModuleCount = parseInt(
+        distMatches[distMatches.length - 1].match(/(\d+)/)[1]
+      );
+
+      // building from source should transform more modules than from dist
+      expect(sourceModuleCount).toBeGreaterThan(distModuleCount);
     });
 
     it('should build app from libs without package.json in lib', () => {

e2e/vite/src/vite.test.ts

@@ -1,9 +1,11 @@
 import {
   cleanupProject,
+  getPackageManagerCommand,
   killProcessAndPorts,
   newProject,
   readJson,
   runCLI,
+  runCommand,
   runCommandUntil,
   uniq,
   updateFile,
@@ -285,6 +287,64 @@ describe('@nx/vite/plugin', () => {
     });
   });
 
+  describe('with Vite 8 and React (default)', () => {
+    const vite8App = uniq('vite8app');
+
+    beforeAll(() => {
+      proj = newProject({
+        packages: ['@nx/react'],
+      });
+      runCLI(
+        `generate @nx/react:app ${vite8App} --directory=apps/${vite8App} --bundler=vite --unitTestRunner=vitest`
+      );
+    });
+
+    afterAll(() => {
+      cleanupProject();
+    });
+
+    it('should build React application with Vite 8', () => {
+      expect(() => runCLI(`build ${vite8App}`)).not.toThrow();
+    }, 200_000);
+
+    it('should test React application with Vite 8', () => {
+      expect(() => runCLI(`test ${vite8App} --watch=false`)).not.toThrow();
+    }, 200_000);
+  });
+
+  describe('with Vite 7 (backward compatibility)', () => {
+    const vite7App = uniq('vite7app');
+
+    beforeAll(() => {
+      proj = newProject({
+        packages: ['@nx/react'],
+      });
+      runCLI(
+        `generate @nx/react:app ${vite7App} --directory=apps/${vite7App} --bundler=vite --unitTestRunner=vitest`
+      );
+
+      // Downgrade to Vite 7 and @vitejs/plugin-react v4 (v6 only supports Vite 8)
+      updateJson('package.json', (json) => {
+        json.devDependencies['vite'] = '^7.0.0';
+        json.devDependencies['@vitejs/plugin-react'] = '^4.2.0';
+        return json;
+      });
+      runCommand(getPackageManagerCommand().install);
+    });
+
+    afterAll(() => {
+      cleanupProject();
+    });
+
+    it('should build React application with Vite 7', () => {
+      expect(() => runCLI(`build ${vite7App}`)).not.toThrow();
+    }, 200_000);
+
+    it('should test React application with Vite 7', () => {
+      expect(() => runCLI(`test ${vite7App} --watch=false`)).not.toThrow();
+    }, 200_000);
+  });
+
   // TODO(Colum): Move this to a vitest specific e2e project when one is created
   describe('react with vitest only', () => {
     const reactVitest = uniq('reactVitest');

package.json

@@ -166,7 +166,7 @@
     "@typescript-eslint/rule-tester": "^8.40.0",
     "@typescript-eslint/type-utils": "^8.40.0",
     "@typescript-eslint/utils": "^8.40.0",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react": "^6.0.0",
     "@webcontainer/api": "1.5.1",
     "@xstate/immer": "0.3.1",
     "@xstate/inspect": "0.7.0",
@@ -327,7 +327,7 @@
     "unist-builder": "^4.0.0",
     "use-sync-external-store": "^1.2.0",
     "verdaccio": "6.0.5",
-    "vite": "7.1.3",
+    "vite": "8.0.0",
     "vitest": "4.0.9",
     "webpack": "5.101.3",
     "webpack-dev-server": "5.2.2",