White window when debugging Electron forge "typescript + webpack" app from VSCode - MAIN_WINDOW_WEBPACK_ENTRY variable is not being set

user_9461051 0
Viewed 236

I created an Electron forge project as described in the forge guide using the "typescript + webpack" template:

> yarn create electron-app debugging-test --template=typescript-webpack

The generated app works fine when running npm start. Then I wanted to configure VSCode debugger for this template so I followed the debugging section of the forge guide and created launch.json file with this content:

{
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
  "windows": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win.cmd"
  },
  // runtimeArgs will be passed directly to your Electron application
  "runtimeArgs": [
    "foo",
    "bar"
  ],
  "cwd": "${workspaceFolder}"
}

This does not really work for me. After clicking F5 the debugger starts but it doesn't break on any breakpoints in the main process nor no window appears. Then I tried the launch.json from Microsoft's vscode-recipes:

{
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Electron: Main",
              "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
              "runtimeArgs": [
                  "--remote-debugging-port=9223",
                  "."
              ],
              "windows": {
                  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
              }
          },
          {
              "name": "Electron: Renderer",
              "type": "chrome",
              "request": "attach",
              "port": 9223,
              "webRoot": "${workspaceFolder}",
              "timeout": 30000
          }
      ],
      "compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]
  }

This one, after hitting F5, starts the Electron window fine and even breakpoints in the main process are hit but no content is loaded to the window. The window is white. When breaking on line 21 in index.ts:

mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

I see that the MAIN_WINDOW_WEBPACK_ENTRY variable is not set and that's why there is no content loaded to the window.

What's the correct VSCode setup to debug "typescript + webpack" electron's forge template?

electron-forge vscode-debugger electron visual-studio-code webpack
1 Answers

I found this is a bug in Windows that is tracked here on Github. The workaround is to remove the fork-ts-checker-webpack-plugin. E.g., in webpack.plugins.js remove the new ForkTsCheckerWebpackPlugin() from the array for now until it is fixed:

//const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = [/*new ForkTsCheckerWebpackPlugin()*/];

After that debugging both, main and renderer, processes work great!

user_94610510
Related