Sourcemap resolution not working for sourcemaps in node_modules folders.

[shoerob]

I have a few node_modules I am including in a main project that include .js, .d.ts, .js.map, and .ts files. The reason for this is that I'd like to be able to debug the main project, as well as the modules which it heavily depends on via npm linking the modules during development. The structure of the fully built project is as follows:

project/src/index.ts
project/lib/index.d.ts
project/lib/index.js
project/lib/index.js.map
project/node_modules/mymodule/src/someclass.ts
project/node_modules/mymodule/lib/someclass.d.ts
project/node_modules/mymodule/lib/someclass.js
project/node_modules/mymodule/lib/someclass.js.map

Note that "project/src/index.ts" imports "someclass" in the following way:
import { someclass } from 'mymodule/lib/someclass';

My launch.json has the following configuration:

{
    "name": "Launch",
    "trace": "all",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/index.ts",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": true,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/lib"
},

When launching the application, any breakpoints I set in "project/src/index.ts" are successfully detected and hit. Any breakpoints I set in "project/node_modules/mymodule/src/someclass.ts" are noted in VSCode as "breakpoint ignored because generated code not found". However, when I set a breakpoint in "project/node_modules/mymodule/lib/someclass.js" (the javascript file), the breakpoint is set, and when it is hit, the corresponding .ts file is displayed in VSCode.

In looking at the source code for vscode-node-debug, it looks like sourcemaps are resolve in one of the following ways when a breakpoint is set in a .ts file (please correct me if I am wrong):

• try to find a sourcemap relative to the .ts file
• try to find an already loaded sourcemap by matching the .ts file to the sources array.
• try to find a sourcemap in the outDir specified in the configuration.

Based on this, I can understand why the sourcemap for "someclass.ts" does not get resolved. I can also understand why adding the breakpoint to "someclass.js" causes the sourcemap to resolve successfully. This is because the .js file contains a sourceMappingURL which points to the correct location, and removes the guesswork.

That being said, I am wondering if this falls under the category of bug or feature request. Should I be able to debug typescript w/sourcemaps in the node_modules subfolders by adding breakpoints to those typescript files? Or - should I be using a different project configuration altogether to make debugging work properly? I don't think my project setup is that unreasonable given the environment, but I am open to suggestions.

One way to fix this would be to specify multiple directories for "outDir" instead of restricting it to just one. In doing so, vscode-node-debug would be able to search in multiple custom locations for sourcemaps instead of just the main project compilation folder.

Please let me know if you need me to explain this in any more detail.

[cesarvarela]

Any update about this?

I'm using mutiple glob patterns in the outFiles section of lauch.json to no avail

[jamietre]

Just started having this problem too

In node_modules/some-module I have a structure

node_modules/some-module
   src/yyy.ts
   src/subfolder/xxx.ts
   yyy.js
   yyy.map.js
   subfolder/xxx.js
   subfolder/xxx.map.js

each file *.js ends with:

//# sourceMappingURL=my_name.js.map

xxx.js.map:

{"version":3,"sources":["../src/subfolder/xxx.ts"],"names":[],"mappings":" ... "file":"xxx.js"}

.. with sources being a valid relative path to the source file under src root folder. But debugging always just shows the actual js file, while it shows the source for files that are not in node_modules

Doesn't work even if I embed the source in the map file. It seems like the map is being completely ignored

Trying really hard to come up with a pattern that allows debugging compiled code distributed via npm packages, with source maps. Nothing seems to work. It seems very strange that just being in the "node_modules" subfolder would break anything, why would source maps have some special behavior there versus any other folder? As far as node is concerned, it's just a place.

[sandyplace]

Having the exact same issue. Is there best practices for re-using your existing source code libraries developed internally with new projects as described by @shoerob? He articulates exactly what we have setup as well. Is there some other way to set this up to get source debugging and break points in your common shared libraries?

[weinand]

I have no problems with source maps in npm modules. The following screenshot shows VS Code's node debugger being debugged by itself:

Here loggingDebugSession.ts and protocol.ts are coming from the npm module vscode-debugadapter.

For the npm modules I let the TypeScript transpiler create inlined source maps with inline source:
https://github.com/Microsoft/vscode-debugadapter-node/blob/master/adapter/src/tsconfig.json

In the screenshot you can see in the editor header that VS Code loads the inlined source from the JavaScript files.

In the project that uses the npm module, I do not have to add anything node module related to the outFiles attribute because inlined source maps with inlined source are self contained.
The outFiles attribute only has a glob pattern for all generated JavaScript files in the 'out' folder:
https://github.com/Microsoft/vscode-node-debug/blob/master/.vscode/launch.json#L21

You can find the node-debug project here:
node-debug https://github.com/Microsoft/vscode-node-debug

[weinand]

@jamietre did you add the location of the generated JavaScript in your node modules as an outFiles glob pattern?

Something like:

"outFiles": [ "${workspaceRoot}/node_modules/**/*.js" ]

If you know that only a few of the modules use source maps you can improve lookup performance by restricting the glob pattern only to specific modules:

"outFiles": [ "${workspaceRoot}/node_modules/{module_a,module_b}/**/*.js" ]