Search code examples
reactjselectronviterollupjselectron-react

is there a way to ensure electron-vite/rollup uses absolute references to compiled assets?

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.

enter image description here

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 : enter image description here

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.

enter image description here

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):

enter image description here

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?

Solution

  • The solution to this turned out to simply be to place a base tag in my html head tag, like so:

    <head>
  <meta charset="UTF-8" />
  <title>Electron</title>
  <base href="/" />
</head>

    according to MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base):

    The HTML element specifies the base URL to use for all relative URLs in a document. There can be only one element in a document.

    A document's used base URL can be accessed by scripts with Node.baseURI. If the document has no elements, then baseURI defaults to location.href.

    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.