36

I am using Visual Studio Code version 1.17, and my objective is to debug the current typescript file. I have a build task running, so I always have a corresponding javascript file like this:

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

I have tried with the following launch.json configuration: 

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

But I get the error: Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

But the corresponding JavaScript file exists!

tsconfig.json: 

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}
Improve this question
1
  • Added stackoverflow.com/a/53236103/428486 with solutions same dir and separate dir, both of which I confirmed work in vscode, hope it helps! Commented Nov 10, 2018 at 5:08

12 Answers 12

Reset to default
22

The problem may be with your map files and not with configuration.

Before trying anything else you want to make sure your paths that you are using in your launch configuration are correct.

You can do so by substituting the paths with absolute paths on your system temporarily to see if it works.

If it does not work you should:

Check your tsconfig and make sure mapRoot under compilerOptions is not set to anything. This is what official documentation has to say about it:

Specifies the location where debugger should locate map files instead of generated locations. Use this flag if the .map files will be located at run-time in a different location than the .js files. The location specified will be embedded in the sourceMap to direct the debugger where the map files will be located.

You can read more about it here

In most of the cases, you don't really want to set it to anything.

Also, make sure that

"sourceMap": true`

is set in compilerOptions in tsconfig.json and map files are getting generated.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The debugger is working if given abseloute paths. mapRoot is not set - I will edit the original question so the tsconfig.json is included. Lastely - map files are getting generated.
If it is working with absolute paths, then it obviously means that you need to set "program" and "outFiles" correctly. I set both like this: "program": "${workspaceFolder}/backend/src/app.ts", "outFiles": [ "${workspaceFolder}/backend/build/**/*.js"] ${workspaceFolder} gives you the location of home folder of your project. From there you can navigate to your files. You can have a look at my full configuration in my answer below. stackoverflow.com/questions/31169259/…
stackoverflow.com/a/47215246/7022062 <-- fixing link that Aakash Malhotra provided in his comment
VS Code Insiders currently (Jan '19) comments out SourceMap by default (tsconfig.json). I had to uncomment Sourcemap:true otherwise source maps aren't created and the default debug launch config in launch.json will cause VS-C to throw the "corresponding Javascript files can't be found" error. You'd expect the default behaviour of VS-C would be to generate source maps but apparently this is not the case.
I've been using VScode 1.46.1 and I'm about to test my last and tenth launch.json... Note that it is written in plain text at the bottom of VsCode help page "cannot find corresponding JavaScript" This is a serious bummer for newcomers to TypeScript! Putting absolute path increased the number of errors in the log, so it was definitely a mark on the right direction. Thank you so much.
19
+100

The configuration for your outFiles points to the wrong directory.

Replacing your launch.json config with this would fix it:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

From the vscode launch.json variable reference:

${fileDirName} the current opened file's dirname

should be the directory you need.

Note that you can also use "outFiles": ["${fileDirname}/**/*.js"] to include subdirectories.

The configuration you're using adds the following directory:

"${workspaceFolder}/${fileDirname}**/*.js"

Which translates to something like:

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

i.e. the path to the root is in there twice, making it an invalid path.

If your .js files are on a different outDir: simply use the path to such directory. Typescript sourceMaps will do the rest.

For example, if you put your .js files in a dist directory:

"outFiles": ["${workspaceFolder}/dist/**/*.js"]
Improve this answer

3 Comments

did some tests and you nailed it - outFiles is the property that made it possible. I guess my problem was that I did not think the system was "smart" enough to lkp the file with help of sourcemaps, but now it's more clear thanks to your answer. In other words, this would not work with sourcemaps disabled?
Correct, It would not work with source maps disabled. Not super clear in the docs but it doesn't work if you disable sourceMaps in tsconfig.json: code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps
I have almost and identical problem, have tried the above solutions but the problem continues, anyone can help me out ? stackoverflow.com/questions/74281385/…
4

In case someone else bumps into this: if you're using webpack to build your project, you have to use a devtool setting that generates VS Code compatible source maps. Through trial and error, cheap-module-source-map and source-map work well. I ended up adding this to my webpack.config.js:

devtool: env.production ? 'source-map' : 'cheap-module-source-map'
Improve this answer

Comments

2

You may need to enable source maps in your tsconfig.json

"sourceMap": true,
Improve this answer

Comments

2

I got it fixed by adding "sourceMap": true in tsconfig.json

launch.json looks like

{
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/src/index.ts",
    "preLaunchTask": "tsc: build - tsconfig.json",
    "outFiles": ["${workspaceFolder}/build/**/*.js"]
  }
]
}
Improve this answer

Comments

2

Remember that the program file that you want to run should have the focus before you execute, otherwise you'll get the 'Cannot find Javascript' error dialog. Especially when the file you are executing is not a Javascript or a Typescript file. Becuase, in the default launch.json file, configuration "program": "${file}" is specified. That means the file that is currently being displayed on the screen will be executed.

So for example: If you are in a non-js or non-ts file, say, tsconfig.json or launch.json and you click Run command, then you'll get that error dialog.

Properly setting up a Typescript project in VS Code

Make sure you have Typescript and Node.js installed on your machine before creating the project.

1.Intialize in the terminal

In the terminal create a new folder for your project.

mkdir MyProject

Change the current directory to the folder you made above.

cd MyProject

Initialize the project to enable Typescript. This will create the tsconfig.json file.

tsc --init

Open this folder in VS Code. This command works from MacOS. You can open manually too.

code .

2.Configure the output directory

Now go to the file tsconfig.json and add the following lines to the compilerOptions. Yes, you need to specify the output directory here in tsconfig.json instead of launch.json. VS Code will always look for files in default outDir of launch.json which is ${workspaceFolder}/**/*.js.

"outDir": "./out",  /* Specify .js output files. */
"sourceMap": true   /* Generate corresponding .map files. */

Running/Debugging the project

Write a simple program to test and run: welcome.ts

console.log('Welcome to Typescript');

1.Build

Now Click Run Build Task (Shift + Command(Ctrl) + B) from the Terminal menu of the VS Code and type the following command and press enter:

tsc: watch - tsconfig.json

You need to Run Build Task once when you first open the project. This will start watching for code changes in the project.

2.Run

Now go to the Typescript program that you want to run (Make sure your program file .ts has the focus). From the Run menu:

Click Start Debugging for debug (F5)

OR

Click Run Without Debugging (Ctrl + F5)

Output will be displayed in the Debug Console.

That's it. It may seem overwhelming at first, but it's easy once you get used to it.

Improve this answer

Comments

1

I had a weird situation where my machine worked perfectly fine based on @lucascaro suggestions but on someone else's computer with the same version of vscode, node, ts, etc. I could still see the error message.

So, if you have followed all the instructions from @lucascaro and you are still seeing the error message try adding this to your launch.json configuration after the program property, like this:

{
  ...
  "preLaunchTask": "tsc: build - tsconfig.json",
  ...
}

This addition made it work on the second machine, but if i added it to mine it would not work anymore.

So if you are in a place where it still fails give this a try.

Improve this answer

Comments

1

This worked in my case:

Go into your gulpfile.js and find the line that contains sourcemaps.write(). Change this line to

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))

Rebuild your project and try running the debugger again. Credit goes to roblourens on GitHub. He linked this page, which was helpful.

Improve this answer

Comments

0

In my case the culprit was setting the working directory to some directory other than the file's directory in launch.json:

"cwd": "${workspaceFolder}/dist"

Perhaps it could be a bug in VSCode.

Improve this answer

Comments

0

In my case the Base url generated as

"baseUrl": "./",

inside tsconfig.json

I changed it to

"baseUrl": "./src"

and the mapping started working.

Improve this answer

Comments

0

In my case, I added "sourceRoot": "../../" in the compiler options of tsconfig.json.

Check the relative path "sourceRoot": "" generated in app.js.map files as "sourceRoot":"../../","sources":["src/app.ts"] indicates the absolute path of your .ts files.

Improve this answer

Comments

-3

Hi I had the same problem. You just need to add to the user path or the global path variable the path you have installed npm.

C:\Users\userName\AppData\Roaming\npm

enter image description here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.