Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 4 tasks
Nick-Lucas opened this issue Nov 12, 2023 · 4 comments

Comments

@Nick-Lucas
Copy link

Nick-Lucas commented Nov 12, 2023

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
image
  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
image

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

  • 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
Copy link
Author

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

@mandarini mandarini transferred this issue from nrwl/nx Nov 13, 2023
@neermitt
Copy link

neermitt commented Dec 8, 2023

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

@dianjuar
Copy link

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
Copy link

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',
                    },
                ],
            },
        },
    };
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants