electron-builder portable app fails to run after build

I added electron-builder after most of the application was already coded. Everything runs perfectly when running the application through npm but fails after building with the errors below. I suspect is has something to do with the electron-builder webpack and the fact that I don't actually have a preload like their boilerplate. Boilerplate makes use of Vue which I dont know.

Getting the following errors when running the application after building:

1.

Unable to load preload script: C:\Users\source\repos\Electron\electron\dist\win-unpacked\resources\app.asar\preload.js - electron/js2c/renderer_init.js:91 

Error: Cannot find module 'C:\Users\source\repos\Electron\electron\dist\win-unpacked\resources\app.asar\preload.js'
at Module._resolveFilename (internal/modules/cjs/loader.js:972)
at Function.o._resolveFilename (electron/js2c/renderer_init.js:35)
at Module._load (internal/modules/cjs/loader.js:848)
at Function.f._load (electron/js2c/asar_bundle.js:5)
at Object.<anonymous> (electron/js2c/renderer_init.js:91)
at Object../lib/renderer/init.ts (electron/js2c/renderer_init.js:91)
at __webpack_require__ (electron/js2c/renderer_init.js:3)
at electron/js2c/renderer_init.js:3
at ___electron_webpack_init__ (electron/js2c/renderer_init.js:3)
at electron/js2c/renderer_init.js:172

Not allowed to load local resource: file:///C:/Users/source/repos/Electron/electron/dist/win-unpacked/resources/app.asar/index.html

Current configuration of package.json

{
  "name": "electron-desktop",
  "version": "1.0.0",
  "license": "MIT",
  "author": "ME",
  "main": "src/main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder --win=portable",
    "compile": "electron-webpack",
    "build": "yarn compile && electron-builder --win=portable"
  },
  "dependencies": {
    "source-map-support": "^0.5.16",
    "bootstrap": "^4.6.0",
    "custom-electron-titlebar": "^3.2.6",
    "systeminformation": "^5.3.4",
    "jquery": "^3.5.1",
    "ms-wmic": "^1.0.4",
    "node-fetch": "^2.6.1"
  },
  "devDependencies": {
    "electron": "11.2.3",
    "electron-builder": "^22.4.1",
    "electron-webpack": "^2.8.2",
    "webpack": "~4.42.1"
  },
"electronWebpack": {
  "commonSourceDirectory": "src",
  "staticSourceDirectory": "src",
  "title" : true,
  "main": {
    "sourceDirectory": "src" 
  },
  "renderer": {
    "sourceDirectory": null 
  }
},
  "build": {
    "appId": "com.electron.register",
    "productName": "ElectronDesktop",
    "copyright" : "Copyright © 2021 ${author}",
    "win": {
      "target": [
        "portable"
      ]
    },
    "portable": {
      "artifactName": "Electron-Registration.exe"
    }
  }
}

Electron folder structure

My preload.js only contains the following for the custom title-bar

const path = require('path');
const url = require('url');

const customTitlebar = require('custom-electron-titlebar');

window.addEventListener('DOMContentLoaded', () => {
  new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#092731'),
    icon: url.format(path.resolve(__dirname, '/images', '/logo-white.png')),
    shadow: true
  });

  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})