Details
I am writing an electron-vite application, that uses react-router-dom for it's routing. I deploy the "renderer" folder to vercel, along with a vercel.json at root.
Now the app works fine when i navigate starting from the root domain but once i copy the url (e.g. https://example.com/app/transfers/id) to another tab, it just displays a blank, screen.
Investigating the console, i can see it fails to get the bundled js file generated by rollup.
Then when I check out the "sources" tab, I can see this is because it tries to access the assets
folder using a relative paths :
I know this is the issue because, when i enable Local overrides in developer tools, and manually remove the "." in front of the paths, everything works fine.
and this makes sense because we should be looking for the generated bundles at: https://example.com/assets/bundle.js
and not:
https://example.com/app/transfers/id/assets/bundle.js
I understand this could easily be fixed by switching to HashRouter instead of Browser Router, infact i have code that switches, between the HashRouter and BrowserRouter, based on whether you're in the browser on running the electron app.
But I would love to avoid using HashRouter in the browser if possible.
What I have tried:
I know of the vite base path config option. setting that to / still yields no good results (bundled html remains the same, no matter what i pass to base):
So is there some other way to solve this or a way to make sure the bundles are always looked up at their absolute paths?
The solution to this turned out to simply be to place a
basetag in my htmlheadtag, like so:according to MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base):
An perfect solution for this case since the issue was with vite/rollup generating relative URL's for my generated JS and css bundles.
Cheers.