Electron loads a wrong file when using menu Window "Reload" - electron: Failed to load URL: file:///

Question

I am trying to load my app for packaging but the native electron reload function used in the Menu "Window" - "Reload" is loading the file: "file:///"

electron: Failed to load URL: file:/// with error: ERR_FILE_NOT_FOUND (Use Electron --trace-warnings ... to show where the warning was created)

I am loading the files using electron-vite but in production or in preview I use the file directly. How can i reload the same file i used with electron main.js

const appPath = app.getAppPath();

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    icon:
      process.platform === "darwin"
        ? path.join(process.env.VITE_PUBLIC || "", "app-logo.icns")
        : path.join(process.env.VITE_PUBLIC || "", "app-logo.ico"),
    minWidth: 1200,
    minHeight: 800,
    width: 1920,
    height: 1080,
    webPreferences: {
      preload: path.join(appPath, "out/preload/preload.js"),
      webSecurity: false, // TODO: Review this
    },
  });

  // Routers
  VendorRouter();
  SettingsRouter();
  tsvRouter();
  DatabaseRouter();
  loggerRouter();

  const productionPath = path.join(appPath, "out/renderer/index.html");

  console.log("\nproductionPath", productionPath, "\n");

  // Load the index.html of the app
  if (app.isPackaged) mainWindow.loadFile(productionPath);
  // Vite dev server URL
  else mainWindow.loadURL("http://localhost:5173");

  mainWindow.on("closed", () => (mainWindow = null));
}

I am expecting to see the same page (single page website - React) on reload.

Edit: I forgot to add that the index.html is loaded correctly when the app starts, but reloading using the window.reload() method reloads that empty file. Missing the file name or path. I saw some solutions saying to add a base tag to the index.html file to it can search the page but it didn’t work.

<base href="./"/>