How to attach debugger to ts-node command in VSCode

Question

How to attach the VSCode debugger to the ts-node command that uses env variables like the below one:

package.json:

{
"runMyScript": "ts-node -r dotenv/config --transpile-only tasks/migration/myScript.ts dotenv_config_path=./local.env"
}

I tried adding flags --respawn --inspect=4000 to the above command with below launch.json, but it didn't work:

launch.json:

{"configurations": [
    {
      "name": "RUN attach to DEV",
      "type": "node",
      "port": 4000,
      "request": "attach",
      "trace": true,
      "skipFiles": ["<node_internals>/**"],
      "restart": true
    },
]}

Answer 1

Problem: MODULE_NOT_FOUND and "Cannot find module @myproj/MY_PACKAGE"

Background: Missing paths support

• The other solutions do NOT work with TS path mapping, i.e. the paths config option, which is commonly used for allowing cross-referencing packages in monorepos. Those will result in MODULE_NOT_FOUND errors.
• TL;DR: This requires a 3rd-party solution. Details:
  • Apparently, TS path mapping support is a nightmare to get working across all the possible target systems and environments.
  • Hence, TypeScript contributors stated that they don't intend to resolve paths when building.
  • Same for ts-node.
• One such 3rd-party solution is to add the popular tsconfig-paths into the mix.
  • They even have an example of a VSCode launch config in their docs.

Solution

• Install tsconfig-paths and ts-node (or tsx) as dev dependencies.
• Make sure it works by running things in the terminal first:

  cd packages/MY_PACKAGE && npx ts-node -r tsconfig-paths/register src/index.ts
  

• Once you verified that it works, add to launch config:

  {
    // ...
    "configurations": [
      // ...
      {
        "name": "ts-node MY_PACKAGE",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node",
        // "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/tsx",
        "runtimeArgs": ["-r", "tsconfig-paths/register"],
        "cwd": "${workspaceFolder}/packages/MY_PACKAGE",
        "program": "src/index.ts"
      }
    ]
  }
  

• ▶ Run it! (Consider this VSCode Debugging visual explanation if you don't know how.)
  • Hint: Make sure to open the DEBUG CONSOLE view to see what's going on. It does not always focus that view automatically:

Notes

• tsconfig-paths must reference a tsconfig.json directly. You must either:
  • cd into (set cwd to) the path that has the target tsconfig.json,
  • or provide TS_NODE_PROJECT.
• This works with both tsx and ts-node. tsx is a lot faster but does not do any type checking.
• You should not need to set outFiles, since this solution uses injection-based transpilation, i.e. it has the compiled *.js files in memory, and does not write them to disk.
• Tangential bonus note: The VSCode launch configuration options don't seem to be properly documented. But one of the many cool things is that you can prompt user for inputs as part of a launch action.

Answer 2

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Example",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],

      "args": ["src/script.ts", "--example", "hello"],
      
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**", "node_modules/**"]
    }
  ]
}

This works for me.

Answer 3

From the official documentation: https://typestrong.org/ts-node/docs/recipes/visual-studio-code

{
"configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "runtimeArgs": [
        "-r",
        "ts-node/register"
    ],
    "args": [
        "${workspaceFolder}/src/index.ts"
    ]
}],

}

Answer 4

Here is a .vscode/launch.json config that allows you to...

• directly execute/debug the npm script specified in package.json
• be specific about the node version you want to use (assuming nvm is used)
• make use of nodejs v20+ built-in .env file support

Given the following scripts section in your package.json:

"scripts": {
  "start": "node -r ts-node/register --env-file=.myenvfile src/index.ts",
},

You can attach your vscode debugger with the the following launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "start",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "runtimeVersion": "21"
    }
  ]
}

See https://code.visualstudio.com/docs/editor/debugging for further reference.

Answer 5

• Put this json to .vscode/launch.json or add configurations to your existing configurations

{
  "version": "1.0.0",
  "configurations": [
    {
      "name": "TS-Node",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node",
      "runtimeArgs": [
        "--transpile-only",
        // if you use esm
        "--esm" 
      ],
      "program": "${file}",
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**", "node_modules/**"]
    }
  ]
}

• Switch to file you want to launch and set breakpoint
• Enable Run and Debug window on the left side of VSCode and run this configuration called TS-Node
• Congratulations! You are debugging your typescript code 🥳

Answer 6

This solution works for me https://gist.github.com/cecilemuller/2963155d0f249c1544289b78a1cdd695

The idea is to use: node -r ts-node/register/transpile-only

{
  ...
  "runtimeExecutable": "node",
  "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
}