Open Nick-Lucas opened 10 months ago
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
you will need to set config.devServer.historyApiFallback = true
in rspack.config.js of your project for dynamic routing to work
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.
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',
},
],
},
},
};
});
Current Behavior
pnpm nx g @nx/react:app testapp --bundler=rspack
pnpm nx serve testapp
and navigate to/page-2
on the UI - you see page-2Expected Behavior
GitHub Repo
No response
Steps to Reproduce
Above
Nx Report
Failure Logs
No response
Package Manager Version
pnpm 8.5.1
Operating System
Additional Information
The workaround for the SPA Routing problem seems to be enabling historyApiFallback:
I imagine just setting
devServer.port
might fix the port issue too but haven't needed to try this