VSCode debug Typescript app

Question

I have an app written in TypeScript that uses import statements. I've followed the instructions here to enable debugging in VSCode. VSCode build command is creating output .js and .map files in out-tsc. However when I try to debug, I get the error below:

Debugger attached.
/Users/integrityinspired/Documents/Dev/basilisk-island/dist/out-tsc/server/src/app.js:1
(function (exports, require, module, __filename, __dirname) { import { initQueues } from '../../shared/firebase-app';
                                                            ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger to disconnect... 

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

Of note is that the import of the type is dropped from the js, and it's the import of a function that fails.

app.ts

import { HandlerDef } from '../../shared/handler/handler-def';
import { initQueues } from '../../shared/firebase-app';

const handlers: HandlerDef[] = [
];
initQueues('app', handlers);

app.js (compiled by VSCode)

import { initQueues } from '../../shared/firebase-app';
const handlers = [];
initQueues('app', handlers);
//# sourceMappingURL=/Users/integrityinspired/Documents/Dev/basilisk-island/server/src/app.js.map

firebase-app.ts

import * as firebase from 'firebase';
import * as Queue from 'firebase-queue';
import { HandlerDef } from './handler/handler-def';
import { createQueue } from './queue-wrapper';

export function initQueues(queue: string, handlers: HandlerDef[]): void {
    const config = firebaseConfig();
    firebase.initializeApp(config);
    let envSuffix: string = '';
    if (process.env.NODE_ENV === 'development') {
        console.log('Running in dev mode');
        envSuffix = '-dev';
    }
    const ref = firebase.database().ref(`/queue${envSuffix}/${queue}`);
    handlers.forEach(def => {
        createQueue(ref, def);
    });
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "client",
    "node_modules",
    "public",
    "typings/browser",
    "typings/browser.d.ts"
  ]
}

launch.json:

{
    // Use IntelliSense to find out which attributes exist for node debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Server",
            "type": "node2",
            "request": "launch",
            "program": "${workspaceRoot}/dist/out-tsc/server/src/app.js",
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "outFiles": [],
            "sourceMaps": true
        },
        {
            "name": "Attach to Process",
            "type": "node2",
            "request": "attach",
            "port": 9229,
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

Answer 1

In tsconfig.json I needed to change "module": "es6", to "module": "commonjs".