fix(react): support Vite 8 for React Router apps (#35365)

## Current Behavior

`@react-router/dev` peer dep tops out at Vite 7, so the React app
generator forces Vite 7 when `--use-react-router` is passed, and the
react-router typecheck e2e test is skipped in CI.

## Expected Behavior

`@react-router/dev` 7.14.2 expands its peer dep to include Vite 8
(`^5.1.0 || ^6.0.0 || ^7.0.0 || ^8.0.0`), so:

- `useViteV7: true` is no longer forced when generating a React Router
app
- The `useViteV7` field is removed from
`ViteConfigurationGeneratorSchema` (was only added for this workaround
and was never wired into the configuration generator body)
- The react-router typecheck e2e test is un-skipped
- `reactRouterVersion` is bumped to `^7.14.2`
- A new `22.7.0` packageJsonUpdate migrates `@react-router/*` packages
to `7.14.2` in existing workspaces

## Related Issue(s)

Fixes NXC-4182

Author: jaysoo

e2e/react/src/react-router-ts-solution.test.ts

@@ -37,8 +37,7 @@ describe('React Router Applications - TS Solution', () => {
     checkFilesExist(`${appName}/vite.config.mts`);
   });
 
-  // TODO: re-enable once @react-router/dev supports Vite 8 — currently pnpm can resolve both vite 7 and 8, causing typecheck failures
-  xit('should be able to build, lint, test and typecheck a react-router application', async () => {
+  it('should be able to build, lint, test and typecheck a react-router application', async () => {
     const buildResult = runCLI(`build ${appName}`);
     const lintResult = runCLI(`lint ${appName}`);
     const testResult = runCLI(`test ${appName}`);

packages/react/migrations.json

@@ -195,6 +195,47 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "22.7.0": {
+      "version": "22.7.0-beta.18",
+      "packages": {
+        "react-router": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/dev": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/node": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/serve": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/express": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/fs-routes": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/cloudflare": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/architect": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-router/remix-routes-option-adapter": {
+          "version": "7.14.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/react/src/generators/application/application.spec.ts

@@ -1167,7 +1167,29 @@ describe('app', () => {
       expect(packageJson.devDependencies['@react-router/dev']).toBeDefined();
     });
 
-    it('should use Vite 7 since React Router does not support Vite 8', async () => {
+    it('should default to Vite 8 when @react-router/dev supports it', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        skipFormat: false,
+        useReactRouter: true,
+        routing: true,
+        bundler: 'vite',
+        unitTestRunner: 'vitest',
+      });
+
+      const rootPackageJson = readJson(appTree, 'package.json');
+      expect(rootPackageJson.devDependencies['vite']).toMatch(/^\^8\./);
+    });
+
+    it('should force Vite 7 when workspace has @react-router/dev < 7.14.0', async () => {
+      updateJson(appTree, 'package.json', (json) => {
+        json.devDependencies = {
+          ...json.devDependencies,
+          '@react-router/dev': '7.13.2',
+        };
+        return json;
+      });
+
       await applicationGenerator(appTree, {
         ...schema,
         skipFormat: false,

packages/react/src/generators/application/lib/bundlers/add-vite.ts

@@ -1,5 +1,6 @@
 import { type Tree, ensurePackage, joinPathFragments } from '@nx/devkit';
 import { nxVersion } from '../../../../utils/versions';
+import { reactRouterSupportsVite8 } from '../../../../utils/version-utils';
 import { NormalizedSchema, Schema } from '../../schema';
 
 export async function setupViteConfiguration(
@@ -32,6 +33,10 @@ export async function setupViteConfiguration(
     plugins: ['react()'],
   };
 
+  // @react-router/dev < 7.14.0 caps its Vite peer dep at ^7, so fall back to
+  // Vite 7 when an older version is already installed in the workspace.
+  const forceViteV7 = options.useReactRouter && !reactRouterSupportsVite8(tree);
+
   const viteTask = await viteConfigurationGenerator(tree, {
     uiFramework: 'react',
     project: options.projectName,
@@ -43,8 +48,7 @@ export async function setupViteConfiguration(
     addPlugin: options.addPlugin,
     projectType: 'application',
     port: options.port,
-    // React Router does not yet support Vite 8, so force Vite 7.
-    ...(options.useReactRouter ? { useViteV7: true } : {}),
+    ...(forceViteV7 ? { useViteV7: true } : {}),
   });
   tasks.push(viteTask);
   createOrEditViteConfig(

packages/react/src/utils/version-utils.ts

@@ -85,3 +85,30 @@ export async function getInstalledReactVersionFromGraph() {
   }
   return clean(reactDep.data.version) ?? coerce(reactDep.data.version).version;
 }
+
+export function getInstalledReactRouterDevVersion(
+  tree: Tree
+): string | undefined {
+  const installed = getDependencyVersionFromPackageJson(
+    tree,
+    '@react-router/dev'
+  );
+
+  if (!installed || installed === 'latest' || installed === 'next') {
+    return undefined;
+  }
+
+  return clean(installed) ?? coerce(installed)?.version;
+}
+
+export function reactRouterSupportsVite8(tree: Tree): boolean {
+  const installed = getInstalledReactRouterDevVersion(tree);
+  if (!installed) {
+    return true;
+  }
+  const coerced = coerce(installed);
+  if (!coerced) {
+    return true;
+  }
+  return coerced.major > 7 || (coerced.major === 7 && coerced.minor >= 14);
+}

packages/react/src/utils/versions.ts

@@ -33,7 +33,7 @@ export const emotionBabelPlugin = '11.13.5';
 export const styledJsxVersion = '5.1.2';
 
 export const reactRouterDomVersion = '6.30.3';
-export const reactRouterVersion = '^7.12.0';
+export const reactRouterVersion = '^7.14.2';
 export const reactRouterIsBotVersion = '^4.4.0';
 
 export const testingLibraryReactVersion = '16.3.0';