How to make VSCode open original TS file of "src" when hitting a breakpoint in node app

I have a CLI node app that I am trying to debug with VSCode. It works pretty well, however when hitting a breakpoint, VSCode opens a new code view from the source map file instead of the actual TS file located in my "src" folder. This is kind of annoying. When I run some JS code in a browser using VSCode as a debugger, VSCode opens the actual TS file as expected. How do I get this behavior also with node?

launch.json:

{      // Use IntelliSense to learn about possible attributes.      // Hover to view descriptions of existing attributes.      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387      "version": "0.2.0",      "configurations": [          {              "type": "pwa-node",              "request": "launch",              "name": "Node",              "skipFiles": [                  "<node_internals>/**"              ],              "program": "${workspaceFolder}/bin/js/index.js",              "console": "integratedTerminal",              "cwd": "${workspaceFolder}/bin/js",              "args": [                  "authorize"              ]          }      ]  }  

tsconfig.json:

{      "compilerOptions": {          "baseUrl": "./src",          "moduleResolution": "node",          "module": "ES2020",          "target": "ES2018",          "allowSyntheticDefaultImports": true,          "jsx": "react",          "strict": true,          "strictPropertyInitialization": true,          "noEmitOnError": true,          "noImplicitAny": true,          "removeComments": true,          "preserveConstEnums": true,          "outDir": "./bin",          "sourceMap": true,          "experimentalDecorators": true,          "emitDecoratorMetadata": true      },      "include": [          "src/**/*"      ],      "exclude": [          "node_modules",          "**/*.spec.ts"      ]  }  

webpack.config.json:

const path = require("path");  const webpack = require("webpack");  const { merge } = require('webpack-merge');    const commonConfig = {      target: 'node',      entry: "./src/Startup.ts",      module: {          rules: [              {                  test: /\.tsx?$/,                  use: [{                      loader: "ts-loader"                  }]              }          ]      },      resolve: {          extensions: [".ts", ".tsx", ".js", ".jsx"],          modules: ["./src", "node_modules"]      },      output: {          path: path.resolve(__dirname, "./bin/js/"),          filename: "index.js",      },      plugins: [          new webpack.DefinePlugin({ "global.GENTLY": false })      ],      externals: {          'cliui': 'commonjs2 cliui',          'y18n': 'commonjs2 y18n',          'yargs-parser': 'commonjs2 yargs-parser',      }  }    const developmentConfig = {      mode: 'development',      devtool: 'source-map',      stats: {          warnings: false      }  }    const productionConfig = {      mode: 'production'  }    module.exports = (env, argv) => {      switch(argv.mode) {        case 'development':          return merge(commonConfig, developmentConfig);        case 'production':          return merge(commonConfig, productionConfig);        default:          throw new Error(`Configuration '${argv.mode}' does not exists.`);      }  }  

https://stackoverflow.com/questions/66897180/how-to-make-vscode-open-original-ts-file-of-src-when-hitting-a-breakpoint-in-n April 01, 2021 at 09:05AM