Sourcemap file is not working in the renderer using require()

[remss]

• Electron Version: 2.0.5
• Operating System (Platform and Version): Win10 amd64
• Last known working Electron version: None

With a project like this:

.
+-- dist
¦   +-- main.js
¦   +-- main.js.map
¦   +-- renderer.js
¦   +-- renderer.js.map
+-- index.html
+-- src
    +-- main.ts
    +-- renderer.ts

In index.html use require('dist/renderer.js') from the HTML page.

Expected Behavior
The console messages triggered by dist/renderer.js should have src/renderer.ts as origin in devtools because the sourcemap file renderer.js.map points to ../src/renderer.ts
The source file src/renderer.ts should be listed in the source panel

Actual behavior
The console messages have dist/renderer.js as origin in devtools
The source file src/renderer.ts does not appear in the source panel

To Reproduce

$ git clone https://github.com/remss/electron-typescript-sourcemap-issue.git
$ npm install
$ npm run build
$ npm start

Screenshots

[remss]

This issue persists in Electron 3.0.9
@ckerr do you have any update on this please?

[remss]

Until it is fixed I use vscode debugger. Here is my launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}\\dist\\main.js",
            "protocol": "inspector",
            "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd",
            "runtimeArgs": [
                "--remote-debugging-port=9223",
            ],
            "sourceMaps": true,
            "stopOnEntry": false, // if true it will break in a unknown file
            "outputCapture": "std" // for console.log to be displayed in debugger console
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 10000,
            "sourceMaps": true,
            "url": "file:///C:/tmp/electron-typescript-sourcemap-issue-git/index.html"
        },
    ]
}

You must remplace the "url" value with the correct path (see https://github.com/Microsoft/vscode-chrome-debug/issues/438)

Both debug sessions main and renderer supports sourcemap correctly.

[remss]

This issue persists in Electron 4.0.2 + TypeScript 3.2
Could you please tell me if electron team plan to fix it?

[c3er]

@remss wrote

Until it is fixed I use vscode debugger. Here is my launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}\\dist\\main.js",
            "protocol": "inspector",
            "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd",
            "runtimeArgs": [
                "--remote-debugging-port=9223",
            ],
            "sourceMaps": true,
            "stopOnEntry": false, // if true it will break in a unknown file
            "outputCapture": "std" // for console.log to be displayed in debugger console
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 10000,
            "sourceMaps": true,
            "url": "file:///C:/tmp/electron-typescript-sourcemap-issue-git/index.html"
        },
    ]
}

You must remplace the "url" value with the correct path (see Microsoft/vscode-chrome-debug#438)

Both debug sessions main and renderer supports sourcemap correctly.

Thanks! This works for me.

I changed the line (similar to)

"url": "file:///C:/tmp/electron-typescript-sourcemap-issue-git/index.html"

to

"url": "file:///${workspaceRoot}/index.html"

PS:

• Electron 4.1.4
• TypeScript 3.4.3

[emlai]

I was able to get sourcemaps working by enabling both inlineSourceMap and inlineSources in tsconfig.json.

[sofianguy]

@remss does @emlai's reported solution work for you?

We are no longer supporting Electron versions older than 6.x.y. Please let us know if the above solution does not work for you and if you are experiencing this on a later version of Electron.

[remss]

The workaround using "inlineSourceMap":true and "inlineSources":true in tsconfig.json is working.
And yes the issue with "sourceMap":true is still here with Electron 8.0.1

[hendimarcos]

@remss wrote

Until it is fixed I use vscode debugger. Here is my launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}\\dist\\main.js",
            "protocol": "inspector",
            "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd",
            "runtimeArgs": [
                "--remote-debugging-port=9223",
            ],
            "sourceMaps": true,
            "stopOnEntry": false, // if true it will break in a unknown file
            "outputCapture": "std" // for console.log to be displayed in debugger console
        },
        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "webRoot": "${workspaceFolder}",
            "timeout": 10000,
            "sourceMaps": true,
            "url": "file:///C:/tmp/electron-typescript-sourcemap-issue-git/index.html"
        },
    ]
}

You must remplace the "url" value with the correct path (see Microsoft/vscode-chrome-debug#438)
Both debug sessions main and renderer supports sourcemap correctly.

Thanks! This works for me.

I changed the line (similar to)

"url": "file:///C:/tmp/electron-typescript-sourcemap-issue-git/index.html"

to

"url": "file:///${workspaceRoot}/index.html"

PS:

• Electron 4.1.4
• TypeScript 3.4.3

vscode also works with "url": "file: /// $ {workspaceRoot} /dist/**/*.html"

[shrinktofit]

Maybe related #22996 (comment)

[electron-triage]

The Electron version reported on this issue is no longer supported. See our supported versions documentation.

If this is still reproducible on a supported version, please open a new issue with any other new information that a maintainer should know.

Thank you for taking the time to report this issue and helping to make Electron better! Your help is appreciated.