VSCode debugger: set a breakpoint in a Typescript package symlinked with `npm link`

Question

I'm trying to debug a NodeJS app and its related typescript packages linked with npm link.

Structure looks like this:

/root/package-a # typescript package
/root/package-b # another typescript package
/root/app # NodeJS application

I have linked the packages to the app as such:

1. npm link inside each package
2. npm link package-a package-b in the app

And then in /root/app/.vscode/launch.json I have:

"runtimeArgs": ["--preserve-symlinks"],
"outFiles": [
  "${workspaceFolder}/build/**/*.js",
  "${workspaceFolder}/../package-a/build/**/*.js",
  "${workspaceFolder}/../package-b/build/**/*.js",
]

This all works very well when it comes to building each package and the app with npm run tsc . Also in watch mode, changes are correctly propagated from packages to app. However when I try to set a breakpoint in VS Code inside any of the packages, the debugger can't find the related TS source. The breakpoint stays grey :-(

Also: I've setup each tsconfig.json with "sourceMap": true, so there are .js.map files next to each built files in the app and in the packages.

How to correctly set this up so that the breakpoint in packages turn red ?

Rushing

Did you fix this? I have the same setup and problem – Gahan

Haven't fixed it yet. I'm still very looking forward to hear about a solution. Anyone ? – Rushing

@Rushing , Me to have this problem now for 2 weeks I have tried everything next up is reinstalling laptop – Fanny

Answer 1

1. the launch.json should not has both the runtimeArgs and the outFiles. it should look like this:

    {
      "version": "0.2.0",
       "configurations": [
    {
      "type": "node",
      "request": "launch",
      "sourceMaps": true,
      "smartStep": true,
      "name": "Launch event",
      "program": "${workspaceFolder}/src/services/event/src/start.ts",
      "outputCapture": "std",
      "envFile": "${workspaceFolder}/src/services/event/.env"
    }
   

   ] }

2. make sure vscode symlink icon is displayed (logger) (in the lib you symlinked) :

3. to symlink you can also (logger) :

4. most important: you should build the npm (in the example - logger), after you build it make sure to go to the node_modules of the service (or root) and see that your changes are built and can be found inside the node_modules (the symlike should take care of it)

Alyworth