Vite is not suitable for building main and preload

[StarLederer]

I was refactoring the code of one of my apps based on this template and I ran into multiple issues using packages in the main process. I looked into why it was happening and it seems like Vite was never designed to build applications that run inside node which was the cause to my problems.

Apologies in advance for testing with pnpm, I am running out of space on my drive so I must save 😅.

1 Issues with packages

First off, the packages that I could not get to work were soundcloud-ts, spotify-api.js and node-id3. All of these packages are used in the main process for fetching search results from soundcloud and spotify, and for writing meta tags to mp3 files on the user's file system. Attempting use the soundcloud and spotify APIs results in ReferenceError: XMLHttpRequest is not defined, and node-id3 fails when executing most methods with TypeError: Cannot read properties of undefined.

1.1 Reproduction

1. Clone the template
2. Remove package-lock.json (might be unnecessary)
3. Execute pnpm install (can probably use npm)
4. Add dependencies pnpm install soundcloud-ts spotify-api.js node-id3
5. Insert the following code at line 4 of /packages/main/src/index.ts

import Soundcloud from "soundcloud.ts";
import * as Spotify from "spotify-api.js";
import * as NodeID3 from "node-id3";

async function testAPIs(searchString: string) {
  // Soudcloud API
  const soundcloud = new Soundcloud();

  // Spotify API
  const spotify = new Spotify.Client({
    refreshToken: true,
    token: {
      clientID: "e2323c89d0964354b86641fb730ef675",
      clientSecret: "2e88b4690b194326aab451ea3d2e5ff2", // I know i was not supposed to share this key, but i already leaked it before so might as well make it easier for you to reproduce, I will regenerate it soon
      // not sure if i was supposed to keep these a secret, but here you go world
    },
  }); // Will fail with ReferenceError: XMLHttpRequest is not defined

  // Search
  console.log(await soundcloud.tracks.searchV2({ q: searchString })); // Will fail with ReferenceError: XMLHttpRequest is not defined
  // console.log(await spotify.tracks.search(searchString));
}

(async () => {
  testAPIs("Bitch Lasagna");
  NodeID3.write({ title: "Title" }, "/your/path/to/song.mp3"); // Will fail with TypeError: Cannot read properties of undefined
})();

6. Execute pnpm watch (can probably use npm)

1.2 Analysis
XMLHttpRequest not being defined is actually quite obvious, Vite expects the code to run in the browser so it does not bundle this API. The issue with node-id3 not being bundled properly could be (and probably is) a Vite bug.

2 Vite
Vite is "Next generation frontend tooling", it was never really meant to bundle code for node. It uses esbuild in the background for bundling, which is runtime agnostic, but it takes additional steps to make the code perfect for the browser and provides auto-magical live updates so we can see DOM changes live. Auto-magical updates are not used by electron (and this template). If i understand correctly the app just reloads whenever the dist of main or preload are changed. As to code optimization, we definitely do not want browser specific optimizations in code that we indent to run in main electron process (node?).

2.1 Vite plugins
Since Vite is used to build all parts of the application in this template it implies that Vite plugins can be used for all parts too. I assume that 99% of Vite plugins make no sense in the main process (I tried adding the vue plugin, it works but does nothing, I haven't tried calling it's API in the main process but i guess it would fail since it would look for the window object). I know that doing this is stupid, but it might be confusing to some users and worst of all, accidentally adding a plugin to the main process can go under the radar and bloat the final bundle.

3 Proposed change
I was able to get the soundclould and spotify api packages to run by compiling the main process with tsup, an esbuild powered typescript devtool (provides file watching, mostly). I did it manually by first running pnpm build and then replacing /packages/main/dist/ with dist/ compiled by tsup. With a configuration like that I could not test it in watch mode so I only tested with pnpm electron packages/main/dist/index.cjs.

I am allowing the opportunity that I might have wasted time researching this and all i needed to do was change the Vite config, but in case the problem described above is not solved with Vite easily I can flesh out the tsup solution more and share reproduction steps (in the form of an issue maybe?).

Perhaps if Vite is indeed not suitable for building the backend we could update the template to use a node-focused bundler for it.

[cawa-93]

First of all, thank you for your feedback.

So you are absolutely right. The processing of the main and preload is shaky. There are many similar templates that use wit for renderer and rollup for everything else. Just search "electron" here.

I created this template as an alternative, and its main idea is "One ring to rule them all" "Use Vite for everting", despite all the possible shortcomings.

[StarLederer]

Thanks for the link!

I was searching on google and your template came out by far on top. I understand your idea but I find it hard for me to get behind (especially when it does not work in my app 😅). I just checked out other templates on Awesome Vite but yours has strong advantages like tight security and github integration.

I am now contemplating whether I want to make these changes in my Svelte fork. I will probably keep it as close to upstream as possible for now and when I finally get to making the npm initializer I can add an option to select what tools users want to use for bundling of each package.

[StarLederer]

I noticed that I accidentally deleted something, node-id3 is a cjs module and it uses "this" to reference module.exports. Most functions use "this" to call other functions. For some reason Vite just copies the method into the final bundle leaving "this" untouched but of course "this" does not reference module.exports anymore (instead it is undefined, which gives us the type error). That is why i concluded it was a Vite bug. I'll probably open an issue about that on Vite