@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

[Nick-Lucas]

As an aside it's unusual that the generated rspack.config.js seems to be using withWeb despite @nx/rspack exporting withReact, the actual difference seems minimal but it could be relevant

[neermitt]

you will need to set config.devServer.historyApiFallback = true in rspack.config.js of your project for dynamic routing to work

[dianjuar]

I found that enabling the historyApiFallback option in webpack worked for me.

However, I believe this option should be enabled by default. Enabling it by default can simplify the development workflow. It can be inconvenient to deal with 404 errors when working on a sub-path and the hot reload is triggered. This forces you to go back and activate the route, which can be time-consuming.

[alexkunin]

Maybe due to specific public path (/react-modules-build/new/reporting/) I need to use in my project, just setting the option to true did not help me, my final configuration (showing only relevant parts) looks like this:

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

module.exports = composePlugins(withNx(), withReact(), (config) => {
    return {
        ...config,
        output: {
            ...config.output,
            publicPath: '/react-modules-build/new/reporting/',
        },
        devServer: {
            ...config.devServer,
            historyApiFallback: {
                rewrites: [
                    {
                        from: /^\/react-modules-build\/new\/reporting\/[^.]+$/,
                        to: '/react-modules-build/new/reporting/index.html',
                    },
                ],
            },
        },
    };
});