Client routing not working for first page load if served by aws s3

[zenstok]

Description

I built an app using client routing.
If I click a link with a route, other than the index page, I'm redirected to the index page with the following errors in the console. Instead of rendering the correct html, it renders home page html.

If i try to access that route from index page, everything works fine, only on first load is not serving it correctly.

Locally, using vite build && vite preview, everything works fine (because it must use server directory to serve the content). I assume that vite-plugin-ssr is not supporting first-load match for client routing served through static files only which i didn't have a problem with using react-router.

Error Message + Error Stack

chunk-a25dfa5d.js:22 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Qr (chunk-a25dfa5d.js:22:5245)
    at Np (chunk-a25dfa5d.js:24:15445)
    at cf (chunk-a25dfa5d.js:24:40089)
    at af (chunk-a25dfa5d.js:24:39978)
    at $p (chunk-a25dfa5d.js:24:39845)
    at Ol (chunk-a25dfa5d.js:24:39700)
    at of (chunk-a25dfa5d.js:24:34772)
    at C (chunk-a25dfa5d.js:9:1538)
    at MessagePort.se (chunk-a25dfa5d.js:9:1900)
Qr @ chunk-a25dfa5d.js:22
Np @ chunk-a25dfa5d.js:24
cf @ chunk-a25dfa5d.js:24
af @ chunk-a25dfa5d.js:24
$p @ chunk-a25dfa5d.js:24
Ol @ chunk-a25dfa5d.js:24
of @ chunk-a25dfa5d.js:24
C @ chunk-a25dfa5d.js:9
se @ chunk-a25dfa5d.js:9
2chunk-a25dfa5d.js:22 Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Eo (chunk-a25dfa5d.js:22:4789)
    at df (chunk-a25dfa5d.js:24:45800)
    at af (chunk-a25dfa5d.js:24:39917)
    at $p (chunk-a25dfa5d.js:24:39845)
    at Ol (chunk-a25dfa5d.js:24:39700)
    at of (chunk-a25dfa5d.js:24:34772)
    at C (chunk-a25dfa5d.js:9:1538)
    at MessagePort.se (chunk-a25dfa5d.js:9:1900)
Eo @ chunk-a25dfa5d.js:22
df @ chunk-a25dfa5d.js:24
af @ chunk-a25dfa5d.js:24
$p @ chunk-a25dfa5d.js:24
Ol @ chunk-a25dfa5d.js:24
of @ chunk-a25dfa5d.js:24
C @ chunk-a25dfa5d.js:9
se @ chunk-a25dfa5d.js:9
chunk-a25dfa5d.js:24 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at df (chunk-a25dfa5d.js:24:45460)
    at af (chunk-a25dfa5d.js:24:39917)
    at $p (chunk-a25dfa5d.js:24:39845)
    at Ol (chunk-a25dfa5d.js:24:39700)
    at jo (chunk-a25dfa5d.js:24:36056)
    at of (chunk-a25dfa5d.js:24:35004)
    at C (chunk-a25dfa5d.js:9:1538)
    at MessagePort.se (chunk-a25dfa5d.js:9:1900)

[zenstok]

I managed to find the cause for this: There was an Amazon CloudFront config that routed every request to index.html which works fine if you have a classic SPA react app with react-router, but not anymore with pre-rendered HTML.

@brillout I discovered a new issue though, with client routing on if you want dynamic routes e.g.

// movie/movie.page.route.ts
export default '/movie/@movieId';

And you want it mixed with client pages e.g. (SPA-only)

movie.page.client.tsx

The route is working fine if going through the in-app link, but if you go through the link, I receive no page found redirect (using view build && vite preview this time, so no overhead of external server).

[zenstok]

The solution is to ensure you are also prerendering the SPA page. If you want client routing, SSG and route params, the only way you can do that using vite-plugin-ssr's routing is to pre-render a basic SPA page and then manage the content through query params.