Help on building with preload script

[jordaofranca]

I'm trying to build an app that uses preload script. It works on dev, but while building it says:
Unable to load preload script: C:\Users\jorda\AppData\Local\Programs\create-svelte-electron-app\resources\app.asar\preload.js

Tried on bot linux and windows.

  "name": "create-svelte-electron-app",
  "version": "1.0.0",
  "private": true,
  "main": "main.js",
  "build": {
    "icon": "public/favicon.png",
    "productName": "Lawzinho",
    "files": [
      "public/**/*",
      "preload.js",
      "main.js"
    ],
    "win": {},
    "linux": {},
    "mac": {}
  },
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "electron": "wait-on http://localhost:5000 && electron .",
    "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
    "preelectron-pack": "yarn run build",
    "electron-pack": "electron-builder"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "concurrently": "^6.0.2",
    "electron": "^12.0.6",
    "tmi.js": "^1.8.4",
    "electron-builder": "^22.10.5",
    "electron-winstaller": "^5.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "sirv-cli": "^1.0.0",
    "svelte": "^3.0.0",
    "wait-on": "^5.3.0"
  },
  "dependencies": {
    "electron-serve": "^1.1.0"
  }
}

[soulehshaikh99]

I have observed that when you are trying to refer to files that gets packaged into the app.asar archive from Electron's main entry point, the application will complain that it cannot access files inside it.
So a workaround to this will be to make changes in main.js and package.json files.
Assuming you have placed your preload.js file directly into the project root directory.

main.js

webPreferences: {
    nodeIntegration: true,
    preload: isDev() ? path.join(__dirname, 'preload.js') : path.join(process.cwd(), 'resources/preload.js'),
    // enableRemoteModule: true,
    // contextIsolation: false
}

package.json

"build": {
    "icon": "public/favicon.png",
    "productName": "Lawzinho",
    "files": [
        "public/**/*",
        "main.js"
    ],
    "extraResources": ["preload.js"],
    "win": {},
    "linux": {},
    "mac": {}
}

I hope this resolves your issue. 😇

[jordaofranca]

I managed to solve it using context separation. So it can keep it "safe".

contextIsolation: true,
preload: path.join(__dirname, "preload.js")

adding it to files in package.json:

"files": [
      "public/**/*",
      "main.js",
      "preload.js"
    ]

[soulehshaikh99]

I managed to solve it using context separation. So it can keep it "safe".

contextIsolation: true,
preload: path.join(__dirname, "preload.js")

adding it to files in package.json:

"files": [
      "public/**/*",
      "main.js",
      "preload.js"
    ]

Nice Solution!