Unable to map compiled JS file to the source TS file in Electron's browserWindow

Question

I'm trying to debug a typescript file that is preloaded in Electron's browserWindow but I'm unable to map the compiled file correctly to the source file.

I'm getting this warning in the console

DevTools failed to parse SourceMap: file:///C:/Users/aabuhijleh/Desktop/Projects/testing/electron-typescript-quick-start/views/preload.js.map

Chromium is apparently looking for the .map file relative to the loaded html file?

This is how my project structure looks like

Here's my repository

UPDATE: On macOS, I'm not getting this error but I'm still getting it on Windows

Answer 1

It seems to be Electron's problem. When loading the "preload.js" script, it does not consider the path of the script relative to "index.html", but assumes that they are in the same folder.

A workaround is setting "inlineSourceMap": true in tsconfig.json, then the source map and the scripts are in the same file.

UPDATE:

In addition to using tsc, we can also choose Webpack to compile TypeScript for Electron.

see https://blog.scottlogic.com/2017/06/06/typescript-electron-webpack.html