Manifest Fallback Behavior in React Router 7 Pre‑Rendered Apps – How to Avoid Fetching /__manifest? #13241
Unanswered
louisferraro
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm setting up a new RR7 app that is just a lightweight pre-render that I'm serving from S3 with the following structure
s3://bucket-name/dkjs/2fa-rr7/
├── index.html
├── 2FA/index.html
└── assets/
├── manifest-dab8518f.js
├── entry.client-CPRXw0sf.js
├── chunk-HA7DTUK3-zqrEsdhL.js
├── root-gvCW2iYk.js
├── getCompiled-CLTmFQQ6.js
└── 2FA-CcK8hJIJ.js
I set my Vite base to "/dkjs/2fa-rr7/", and our pre‑rendered HTML includes an injected manifest object like so
window.__reactRouterManifest = {
"entry": {
"module": "/dkjs/2fa-rr7/assets/entry.client-CPRXw0sf.js",
"imports": [
"/dkjs/2fa-rr7/assets/chunk-HA7DTUK3-zqrEsdhL.js"
],
"css": []
},
"routes": {
"root": {
"id": "root",
"path": "",
"hasAction": false,
"hasLoader": false,
"hasClientAction": false,
"hasClientLoader": false,
"hasErrorBoundary": true,
"module": "/dkjs/2fa-rr7/assets/root-gvCW2iYk.js",
"imports": [
"/dkjs/2fa-rr7/assets/chunk-HA7DTUK3-zqrEsdhL.js",
"/dkjs/2fa-rr7/assets/getCompiled-CLTmFQQ6.js"
],
"css": []
},
"routes/2FA": {
"id": "routes/2FA",
"parentId": "root",
"path": "2FA",
"hasAction": false,
"hasLoader": true,
"hasClientAction": false,
"hasClientLoader": false,
"hasErrorBoundary": false,
"module": "/dkjs/2fa-rr7/assets/2FA-CcK8hJIJ.js",
"imports": [
"/dkjs/2fa-rr7/assets/getCompiled-CLTmFQQ6.js",
"/dkjs/2fa-rr7/assets/chunk-HA7DTUK3-zqrEsdhL.js"
],
"css": []
}
},
"url": "/dkjs/2fa-rr7/assets/manifest-dab8518f.js",
"version": "dab8518f"
};
However at runtime once my js loads there's still a request to
https://bucket-name/dkjs/2fa-rr7/__manifest?p=%2Fdkjs%2F2fa-rr7%2F2FA%2Findex.html&version=dab8518f
which results in a 403 because that file does not exist and triggers an error boundary.
From what I understand in the source code (for example, in fog-of-war.ts, line 199), React Router computes a manifest URL by taking the normalized basename and appending /__manifest. In my case, this becomes /dkjs/2fa-rr7/__manifest.
My questions are:
Is this fallback behavior intentional?
Should React Router be attempting to fetch the manifest from ${basename}/__manifest when a manifest object is already injected via window.__reactRouterManifest?
How can we configure React Router 7 to respect our injected manifest (which points to /dkjs/2fa-rr7/assets/manifest-dab8518f.js) so that it doesn’t try to fetch from the fallback URL?
Is there a recommended way to pass or override the basename (or other configuration) so that React Router doesn’t append /__manifest and instead uses the preloaded manifest data?
Any guidance or pointers to documentation/source code that explains how the manifest is resolved in React Router 7 would be greatly appreciated.
Environment details:
React Router version: 7.2.0
React/React-DOM version: 19.0.0
Deployment: Pre‑rendered HTML hosted on S3, with assets in /dkjs/2fa-rr7/assets/
Vite base: /dkjs/2fa-rr7/
(Also tried basename: /dkjs/2fa-rr7/ in react-router-config)
Thanks in advance for any help!
Beta Was this translation helpful? Give feedback.
All reactions