Debugging a lerna-typescript project in VSCode

Question

I'm trying to build a monorepo using lerna+typescript, I'm using this repo as a start: https://github.com/Izhaki/mono.ts

What i'm trying to achieve is to debug the code inside visual studio code. I've tried something to add the launch.json like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "preLaunchTask": "npm: build",
            "program": "${workspaceFolder}/packages/line/src/index.ts",
            "sourceMaps": true,
            "smartStep": true,
            "internalConsoleOptions": "openOnSessionStart",
            "outFiles": [
                "${workspaceFolder}/packages/line/dist/**/*.js"
            ]
        }
    ]
}

I'm getting some error about he import and the use of:

/Users/davidericci/Desktop/mono.ts-master/packages/line/dist/index.js:1
(function (exports, require, module, __filename, __dirname) { import { getDistance } from '@geo/point';
                                                                     ^

SyntaxError: Unexpected token {

so I've changed inside the tsconfig.build.json (inside packages):

"target": "es2017",
"module": "commonjs",  

and inside the tsconfig.base.json (always inside packages):

{
  "compilerOptions": {
    "lib": ["es2015", "es2016", "dom", "es2017", "es6", "es5"],
    "noUnusedLocals": true
  }
}

but i'm still getting:

internal/modules/cjs/loader.js:605
    throw err;
    ^

Error: Cannot find module '@geo/point'

as error, I think because inside the code (even in the JS code) the import still points to the typescript. I may be wrong here.

all other settings are default for that project.

can be something with tsconfig-paths? or is just some setting inside the launch.json?

Thank you very much guys

Heriberto

Answer 1

Unfortunately I had to drop the idea of using https://github.com/Izhaki/mono.ts

Using standard config files I managed to succeed in debugging with lerna and even using serverless offline.

This are my files:

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug ms-locations",
      "preLaunchTask": "npm: lerna-tsc",
      "program": "${workspaceFolder}/packages/ms-locations/lib/sample.js",
      "cwd": "${workspaceFolder}",
      "outFiles": [
        "${workspaceFolder}/packages/ms-locations/**/*.js"
      ],
      "protocol": "inspector",
    }

tsconfig

{
"compilerOptions": {
    /* Basic Options */
    "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
        "es6"
    ], /* Specify library files to be included in the compilation. */
    "declaration": true, /* Generates corresponding '.d.ts' file. */
    "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true, /* Generates corresponding '.map' file. */
    /* Strict Type-Checking Options */
    "strict": false, /* Enable all strict type-checking options. */
    "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
    /* Additional Checks */
    "noUnusedLocals": true, /* Report errors on unused locals. */
    "noUnusedParameters": true, /* Report errors on unused parameters. */
    "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "incremental": true
},
"exclude": [
    "node_modules",
    "**/*.spec.ts",
    "packages/ms-api/test/*.ts"
]

}

inside my package folder, if you need to use serverless this is the tsconfig

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
  "outDir": "./lib",
  "moduleResolution": "node",
  "noUnusedLocals": false,
  "noUnusedParameters": false,
      "allowSyntheticDefaultImports": true,
  "sourceMap": true,
      "target": "es2017",
  "esModuleInterop": true,
      "incremental": false
  },
  "include": [
      "./src"
  ]
}

I will flag this as the accepted answer even if is not totally compelling the question, but this was my solution.

Hope helps someone

Heriberto

When you say the first tsconfig do you mean in the root? – Depositary

Answer 2

I am using the below configuration in a Turborepo monorepo. 2 Nestjs apps, 1 NextJs app. I am using "type": "node-terminal" and then running my standard dev command in each repo using "command": "yarn dev --filter=app_name". I don't see why this pattern couldn't be used for lerna

launch.json

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node-terminal",
            "request": "launch",
            "name": "Debug Api",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "command": "yarn dev --filter=api",
            "outFiles": [
                "${workspaceFolder}/apps/api/**/*.js",
                "!**/node_modules/**"
            ]
        },
        {
            "type": "node-terminal",
            "request": "launch",
            "name": "Debug Api Gateway",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "command": "yarn dev --filter=api-gateway",
            "outFiles": [
                "${workspaceFolder}/apps/api-gateway/**/*.js",
                "!**/node_modules/**"
            ]
        },
    
        {
            "name": "Debug client",
            "type": "node-terminal",
            "request": "launch",
            "command": "yarn dev --filter=client",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }
    ]
}

Trip

Answer 3

I seemed to make mine work with a slightly different approach, avoiding lerna (despite being a monorepo using Lerna).

Here is my launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Test show",
      "type": "node",
      "request": "launch",
      "address": "localhost",
      "protocol": "inspector",
      "cwd": "${workspaceFolder}/services/shows",
      "program": "${workspaceFolder}/node_modules/serverless/bin/serverless",
      "args": [
        "invoke",
        "local",
        "-f",
        "get",
        "-p",
        "./mocks/get-event.json"
      ],
      "outFiles": [
        "${workspaceFolder}/services/shows/.webpack/service/src/get.js"
      ],
      "autoAttachChildProcesses": true
    }
  ]
}

And my tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "preserveConstEnums": true,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "strict": true,
    "sourceMap": true,
    "target": "es2017",
    "outDir": ".build"
  },
  "exclude": ["node_modules"]
}

Hope this helps you or others!

Pectase

Hi and thanks for the reply! In the end I used a configuration pretty close to yours to run the lambda on local machine, and having some sort of hot reload using serverless offline. – Heriberto