How to debug NodeJS(ES6) code in VSCode editor?

Question

I am trying to debug my nodejs application written in ES6 from VSCode. But it is throwing following error:

node --debug-brk=18712 --nolazy index.js 
Debugger listening on [::]:18712
/Users/rsiva/Projects/Siva/ntask/ntask-api/index.js:1
(function (exports, require, module, __filename, __dirname) { import express from "express";
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)

I have looked at How do I debug vue js application in VS Code? and https://medium.com/@katopz/how-to-debug-es6-nodejs-with-vscode-8d00bd6c4f94#.yaevayjs3 but those solutions are not working.

My package.json:

{
  "name": "ntask-api",
  "version": "1.0.0",
  "description": "Task list API",
  "main": "index.js",
  "scripts": {
    "start": "babel-node index.js"
  },
  "author": "Siva",
  "dependencies": {
    "babel-cli": "^6.5.1",
    "babel-preset-es2015": "^6.5.0",
    "consign": "^0.1.2",
    "express": "^4.13.4",
    "sequelize": "^3.19.2",
    "sqlite3": "^3.1.8"
  },
  "devDependencies": {
    "babel-register": "^6.18.0"
  },
  "babel": {
    "presets": [
      "es2015"
    ],
    "sourceMaps": true,
    "retainLines": true
  }
}

launch.json:

{

    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/index.js",
            "cwd": "${workspaceRoot}",
            "sourceMaps": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

I understand that I am using babel-node for running the application normally from console to use ES6, but how to let VSCode use babel-node instead of node?

score 33 · Accepted Answer · edited Oct 17 '17 at 18:13

33

You need to set runtimeExecutable in launch.json configuration file to the value of babel-node's path.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via Babel",
            "program": "${workspaceRoot}/index.js",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
            "cwd": "${workspaceRoot}"
        }
    ]
}

edited Oct 17 '17 at 18:13

Felicio

448
5
11

answered Jan 31 '17 at 05:20

Waqas Noor

911
6
12

3

Note: On Windows, make sure to specify the executable with the correct extension, for example use npm.cmd instead of just npm which exists but is the shell script for Linux and macOS. – Waqas Noor Jan 31 '17 at 05:25
5

Since you'll probably end up needing to **install** the executable, I'd like to point out that the package is named `babel-cli`. And it's advised for it to be installed **locally**. https://babeljs.io/docs/usage/cli/#installation – Felicio Sep 27 '17 at 13:04
2

While this configuration looks promising it still produces an ES6 related error on import syntax, I am very confused on how to take advantage of VS Code's debugger... https://i.imgur.com/sSj8Cr0.png – Dec 23 '17 at 03:38
1

It worked for me after following @WaqasNoor and @Felicio's answers. A note to Windows users: it's necessary to use _escaped backslashes_ in the path so it becomes `"runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\babel-node"` – Felipe Maia Aug 07 '18 at 20:01

How to debug NodeJS(ES6) code in VSCode editor?

1 Answers1

Linked