fix(react): update react router logic with selected bundler (#30399)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
Currently, when you generate a react app and select `--use-react-router`
and `--bundler=` any other bundler except `vite` you would be forced
into using `vite`

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
When you generate a React app and opt into using `--use-react-router`
with `--bundler=webpack` (for example) you will get an error stating the
React Router can only be used with `vite`.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

Author: ndcunningham

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

@@ -75,33 +75,34 @@ export async function applicationGeneratorInternal(
 
   const options = await normalizeOptions(tree, schema);
 
-  options.useReactRouter = options.routing
-    ? options.useReactRouter ??
-      (await promptWhenInteractive<{
-        response: 'Yes' | 'No';
-      }>(
-        {
-          name: 'response',
-          message:
-            'Would you like to use react-router for server-side rendering?',
-          type: 'autocomplete',
-          choices: [
-            {
-              name: 'Yes',
-              message:
-                'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
-            },
-            {
-              name: 'No',
-              message:
-                'I do not want to use react-router for server-side rendering',
-            },
-          ],
-          initial: 0,
-        },
-        { response: 'No' }
-      ).then((r) => r.response === 'Yes'))
-    : false;
+  options.useReactRouter =
+    options.routing && options.bundler === 'vite'
+      ? options.useReactRouter ??
+        (await promptWhenInteractive<{
+          response: 'Yes' | 'No';
+        }>(
+          {
+            name: 'response',
+            message:
+              'Would you like to use react-router for server-side rendering?',
+            type: 'autocomplete',
+            choices: [
+              {
+                name: 'Yes',
+                message:
+                  'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
+              },
+              {
+                name: 'No',
+                message:
+                  'I do not want to use react-router for server-side rendering',
+              },
+            ],
+            initial: 0,
+          },
+          { response: 'No' }
+        ).then((r) => r.response === 'Yes'))
+      : false;
 
   showPossibleWarnings(tree, options);
 

packages/react/src/generators/application/lib/normalize-options.ts

@@ -3,7 +3,10 @@ import {
   determineProjectNameAndRootOptions,
   ensureRootProjectName,
 } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import { assertValidStyle } from '../../../utils/assertion';
+import {
+  assertValidReactRouter,
+  assertValidStyle,
+} from '../../../utils/assertion';
 import { NormalizedSchema, Schema } from '../schema';
 import { findFreePort } from './find-free-port';
 import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
@@ -52,8 +55,11 @@ export async function normalizeOptions<T extends Schema = Schema>(
     : options.style;
 
   assertValidStyle(options.style);
+  assertValidReactRouter(options.useReactRouter, options.bundler);
 
-  options.bundler = options.useReactRouter ? 'vite' : options.bundler;
+  if (options.useReactRouter && !options.bundler) {
+    options.bundler = 'vite';
+  }
   options.useReactRouter = options.routing ? options.useReactRouter : false;
 
   const normalized = {

packages/react/src/utils/assertion.spec.ts

@@ -1,4 +1,4 @@
-import { assertValidStyle } from './assertion';
+import { assertValidStyle, assertValidReactRouter } from './assertion';
 
 describe('assertValidStyle', () => {
   it('should accept style option values from app, lib, component schematics', () => {
@@ -19,4 +19,17 @@ describe('assertValidStyle', () => {
   it('should throw for invalid values', () => {
     expect(() => assertValidStyle('bad')).toThrow(/Unsupported/);
   });
+
+  it('should throw for invalid react-router and bundler combination', () => {
+    expect(() => assertValidReactRouter(true, 'webpack')).toThrow(
+      /Unsupported/
+    );
+    expect(() => assertValidReactRouter(true, 'rspack')).toThrow(/Unsupported/);
+    expect(() => assertValidReactRouter(true, 'rsbuild')).toThrow(
+      /Unsupported/
+    );
+    expect(() => assertValidReactRouter(true, 'vite')).not.toThrow(
+      /Unsupported/
+    );
+  });
 });

packages/react/src/utils/assertion.ts

@@ -1,3 +1,5 @@
+import { type Schema } from '../generators/application/schema';
+
 const VALID_STYLES = [
   'css',
   'scss',
@@ -18,3 +20,14 @@ export function assertValidStyle(style: string): void {
     );
   }
 }
+
+export function assertValidReactRouter(
+  reactRouter: boolean,
+  bundler: Schema['bundler']
+): void {
+  if (reactRouter && bundler !== 'vite') {
+    throw new Error(
+      `Unsupported bundler found: ${bundler}. React Router is only supported with 'vite'.`
+    );
+  }
+}