"Unable to load preload script" error

[Lucas Araújo]

Hi,

I'm trying to convert an existing (and fully working) Electron + Svelte project to use TypeScript, so I decided to follow your tutorial on Medium.

Problem is, when I launch the executable I get the error in the title, like the path is incorrect.
I'm not sure what the problem is.

This is my folder structure:

.
├── dist/
│   └── public/
│       ├── build/
│       ├── index.html
│       ├── global.css
│       └── favicon.png
├── src/
│   ├── electron/
│   │   ├── bridge.ts
│   │   ├── index.ts
│   │   ├── preload.ts
│   │   └── tsconfig.json
│   ├── svelte/
│   └── server/
├── package-lock.json
├── package.json
├── rollup.config.js
├── svelte.config.js
└── tsconfig.json

I load the preload script from src/electron/index.ts:

mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
// notice the path, `preload.js` should be in the same folder as `index.js`, so I don't know what's wrong
      preload: join(__dirname, "preload.js"), 
    },
  });

This is my root tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES2022",
    "module": "CommonJS",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "useUnknownInCatchVariables": false
  },
  "exclude": ["node_modules", "dist/public", "out/**", "src/svelte/**"],
  "include": ["src/electron/**/*"]
}

I had to change the rootDir to src and not just src/electron like in your example, because I import some stuff from server to electron/index.ts.

Here's the tsconfig.json inside src/electron:

{
  "include": ["./**/*"],
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "sourceMap": true,
    "strict": true,
    "useUnknownInCatchVariables": false,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

This is my package.json, omitting irrelevant properties:

{
  "main": "dist/electron/index.js",
  "build": {
    "appId": "xxx",
    "productName": "xxx",
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "output": "output"
    }
  },
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "npm run build && electron .",
    "dist": "cross-env ROLLUP_WATCH=true npm run build && tsc && electron-builder build"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@tsconfig/svelte": "^3.0.0",
    "cross-env": "^7.0.3",
    "electron": "^22.0.0",
    "electron-builder": "^22.10.3",
    "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",
    "svelte": "^3.0.0",
    "svelte-check": "^3.0.3",
    "svelte-preprocess": "^5.0.1",
    "tslib": "^2.5.0",
    "typescript": "^4.9.5"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "dexie": "^3.2.2",
    "sirv-cli": "^2.0.0"
  }
}

Notice main is set to dist/electron/index.js, I think that's correct, since after building, the file actually ends up there.

Do you have any idea what I'm doing wrong here? Stack Overflow hasn't been much help.

This is what I get in the console when Electron launches:

Inside src/electron/index.ts I'm also logging __dirname, join(__dirname, "preload.js") to the console, and this is what I get when I launch: C:\Users\Lucas\Javascript\[APP NAME]\output\win-unpacked\resources\app.asar\dist\electron C:\Users\Lucas\Javascript\[APP NAME]\output\win-unpacked\resources\app.asar\dist\electron\preload.js
That seems correct to me.

Any advice you could give would be much appreciated.

[Lucas Araújo]

Update: I don't get the "Unable to load preload script" error when I comment out everything inside preload.ts, so it seems to be something in preload.ts that's causing it.
I suspect it's to do with the second error in the screenshot: "Error: module not found: ./bridge", but I still don't know why, since bridge.ts is in the same folder as preload.ts, there's nothing special about those files either, I export an object from bridge.ts: export default bridge;, that I then import in preload.ts so I can expose it to the renderer process:

import { ipcRenderer, contextBridge } from "electron";
import bridge from "./bridge";

contextBridge.exposeInMainWorld("bridge", bridge);

VS Code doesn't complain about a module not found or anything, the type hints work and everything.

[Lucas Araújo]

Update: I managed to fix the first two problems, "Unable to load preload script" and "Error: module not found: ./bridge" by temporarily setting webPreferences.sandbox to false when creating the window. Apparently you can't import anything into the preload script with it enabled, so I'll have to move everything from src/electron/bridge.ts to src/electron/preload.ts, or somehow bundle all the code into the preload script during build.

Now I need to fix the third problem, you can see it in the screenshot above: "DevTools failed to load source map: Could not parse content for file:///C:/Users/Lucas/Javascript/[APP-NAME]/output/win-unpacked/resources/app.asar/dist/**public**/preload.js.map: Unexpected end of JSON input.

I highlighted public there for a reason, DevTools is looking for the source maps in the wrong place, and I don't know why that is, the source map for the preload script is located at file:///C:/Users/Lucas/Javascript/[APP-NAME]/output/win-unpacked/resources/app.asar/dist/**electron**/preload.js.map.

This is also happening with the source maps on the Svelte side, if I click on an error in the console, it takes me to a blank file.

This is the exact problem I'm having, no response three years later.

[Lucas Araújo]

Didn't manage to fix the source map problem, so temporarily I'm using inline source maps to avoid running into it.