'Typescript debugging in Visual Studio Code with tsconfig-paths

I've been trying to get Visual Studio Code to debug Typescript, and keep getting close but not quite there. I'm going by the tsconfig-paths documentation since I have paths defined in tsconfig. I'm able to launch from VSC, but when VSC stops on a breakpoint in the TS code, it stops on the corresponding code in the generated JS. Here is what I have:

tsconfig:

  "compilerOptions": {
    "lib": ["es2020"],
    "target": "es2020",
    "outDir": "build",
    "module": "CommonJS",
    "baseUrl": ".",
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "paths": {
        "@/*": ["src/*"]
    }
  }
}

package.json:

  "scripts": {
    "build": "tsc",
    "start": "npm run build && node ./build/index.js"
  },
  "dependencies": {
  },
  "devDependencies": {
    "@types/node": "15.3.0",
    "ts-node": "^10.7.0",
    "ts-node-dev": "^1.1.8",
    "tsconfig-paths": "^3.14.0",
    "typescript": "4.2.4"
  }
}

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": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/build/index.js",
            "runtimeArgs": [
                "-r",
                "ts-node/register",
                "-r",
                "${workspaceFolder}/node_modules/tsconfig-paths/register",
                "src"
            ],
            "args": [
                "${workspaceFolder}/src/index.ts"
            ],
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ],
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "env": {
                "NODE_ENV": "development",
                "TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json"
            }
        }
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": "build",
            "problemMatcher": [],
            "label": "npm: build",
            "detail": "tsc"
        }
    ]
}

./src/index.ts

import { createApp } from "@/app";

createApp();

./src/app/index.ts

export const createApp = () => {
    const test = 'test';
    console.log('Inside createApp');
    console.log(`test = ${test}`);
}

I'm setting my breakpoint on line 3 of ./src/app/index.ts, but when I launch, it stops at:

What do I have set incorrectly?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source