CODEWITHSUNDEEP
javascripttypescriptdebuggingvisual-studio-codesource-maps
Elies Lou
Elies Lou

Reputation: 351

VScode sourceMaps detected but not used

Hi everyone !

I'm using VSCode to work on an OpenSource project in monorepo with lerna, and I want to provide a package which contains the tools needed to contribute easily.

In order to do this in a way that seems pretty clean to me, I added my monorepo as a submodule in my workbench package.

Here is a link to my current setup: https://github.com/Aetherall/accounts-workbench

The main goal of this package is to give to the developper a working debugger configuration, which allows breakpoints and follows the Error stack within the sources of the monorepo packages.

I succeded to make VSCode read my sourcemaps. Indeed, I switched on the trace options, and I saw in the logs that the .map files were resolved.

But, - and there is my issue - when I trigger an error, instead of leading me to the sources, the debugger just show me the transpiled files...

Here is a sample of my log for one file ( I can provide my whole log if needed to help me )

SourceMaps: sourcemap url parsed from end of generated content: 

AuthenticationServicePassword.js.map

SourceMaps.getMapForGeneratedPath: Finding SourceMap for 

/home/aetherall/Workspace/github/accounts/accounts-workbench/accounts/packages/Server/Authentication/Password/PasswordService/lib/AuthenticationServicePassword.js by URI: 

AuthenticationServicePassword.js.map

SourceMaps.loadSourceMapContents: Reading local sourcemap file from

/home/aetherall/Workspace/github/accounts/accounts-workbench/accounts/packages/Server/Authentication/Password/PasswordService/lib/AuthenticationServicePassword.js.map

here is my debugger config:

{
        "type": "node",
        "request": "launch",
        "name": "Start dev server",
        "program": "${workspaceRoot}/config/start.js",
        "protocol": "inspector",
        "sourceMaps": true,
        "cwd": "${workspaceRoot}",
        "outFiles": [
            "${workspaceRoot}/dist/**/*.js",
            "${workspaceRoot}/**/lib/**/*.js",
            "!**/node_modules/**/*",
        ],
        "skipFiles": ["${workspaceRoot}/node_modules/**/*", "<node_internals>/**/*.js"],
        "smartStep": true,
        "trace": "sm"
},

I am using webpack to bundle the workbench package (not the monorepo) and tsc to transpile the typescript packages in javascript with sourceMaps in my monorepo submodule

I can of course add more informations if needed

Thanks for helping me on this one ! I really can't get why sourceMaps arn't used by the debugger ...

If you do have a solution, please give me some explanations on the problem

Upvotes: 2

Views: 5902

Answers (1)

Elies Lou
Elies Lou

Reputation: 351

I found a solution to my issue :

Source Map loader for webpack

this way, the sourcemaps of the files imported and transpiled will be resolved within webpack.

https://github.com/webpack-contrib/source-map-loader

Upvotes: 1

Related Questions