@nx/react:app with rspack does not support SPA routers (404 errors) or respect the configured Port

[Nick-Lucas]

Current Behavior

1. Generate a new react app: pnpm nx g @nx/react:app testapp --bundler=rspack
2. Select Yes to add React Router (or say no, it makes no difference if you add a router later)
3. Select No to an e2e suite (probably makes no difference but speeds up testing this out
4. pnpm nx serve testapp and navigate to /page-2 on the UI - you see page-2
5. Refresh the page. The page cannot be found with a 404 error to the dev server

1. Also, stop the app, set the port in project.json to a different port, and start it
2. The server still runs on port 4200

Expected Behavior

1. React generator should support client routing out of the box
2. React generator should support changing the dev server port

GitHub Repo

No response

Steps to Reproduce

Above

Nx Report

Node   : 18.17.1
   OS     : darwin-arm64
   npm    : 9.6.7
   
   nx (global)        : 17.1.1
   nx                 : 17.1.1
   @nx/js             : 17.1.1
   @nx/jest           : 17.1.1
   @nx/eslint         : 17.1.1
   @nx/workspace      : 17.1.1
   @nx/esbuild        : 17.1.1
   @nx/eslint-plugin  : 17.1.1
   @nx/node           : 17.1.1
   @nx/react          : 17.1.1
   @nrwl/tao          : 17.1.1
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @nx/rspack : 17.0.0

Failure Logs

No response

Package Manager Version

pnpm 8.5.1

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

The workaround for the SPA Routing problem seems to be enabling historyApiFallback:

# rspack.config.js

const { composePlugins, withNx, withWeb } = require('@nx/rspack')

module.exports = composePlugins(withNx(), withWeb(), (config) => {
  config.devServer.historyApiFallback = true

  return config
})

I imagine just setting devServer.port might fix the port issue too but haven't needed to try this