VS Code Debugging Issue in Electron Forge with Vite Template: Breakpoints Not Binding

Question

I've recently initiated a project using Electron Forge with the Vite template. The setup involved the following commands:

npm init electron-app@latest my-app -- --template=vite

Here's the configuration of my launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
      },
      // runtimeArgs will be passed directly to your Electron application
      "runtimeArgs": [],
      "program": "${workspaceFolder}/src/main.js",
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
    }
  ]
}

I can successfully launch my application using the start debugging in VS Coode. Debugger attached also showed in the terminal. However, I encounter a problem with breakpoints in my code. They appear greyed out, suggesting that they are not being bound correctly.

Upon using the troubleshooting option, the Debug Doctor provided the following information:

✅ This breakpoint was initially set in:

C:\Users\zhuang\Projects\my-electron-app\src\main.js line 125 column 1

❓ We couldn't find a corresponding source location, but found some other files with the same name:

c:/Users/zhuang/Projects/my-electron-app/src/node_modules/esbuild/lib/main.js
If this is the same file, you may need to adjust your build tool to correct the paths.

I'm seeking advice on how to resolve this issue. Is there a way to adjust the build tool or configuration to enable proper binding of breakpoints?

I attempted to add the following configurations to my launch.json file, but unfortunately, it didn't work as expected.

"outFiles": [
    "${workspaceFolder}/src/*.js"
],
"sourceMaps": true,
"sourceMapPathOverrides": {
    "${workspaceFolder}/node_modules/esbuild/lib/*": "${workspaceFolder}/.vite/build/*",
}

Answer 1

Had this issue as well. To fix it, I only had to make sure that the vite config for the main process had sourcemaps enabled.

To do that, modify the file vite.main.config.ts and set sourcemaps to true in the build config:

import { defineConfig } from 'vite'

// https://vitejs.dev/config
export default defineConfig({
  build: {
    sourcemap: true, // add this
  },
})