Troubleshooting issues in a lerna-typescript project using VSCode

Currently, I'm in the process of constructing a monorepo using lerna and typescript. To get started, I'm utilizing this repository as a foundation: https://github.com/Izhaki/mono.ts

My main objective is to debug the code within Visual Studio Code. I attempted to incorporate a launch.json setup like so:

{
    "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"
            ]
        }
    ]
}

Unfortunately, I encountered an error related to importing and using:

/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 {

To address this, I made adjustments within the tsconfig.build.json file (located inside packages):

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

And similarly, within the tsconfig.base.json file (also found within packages):

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

However, the issue persists with the error message:

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

Error: Cannot find module '@geo/point'

This could be due to the fact that even within the JavaScript code, the import still references the TypeScript. It's possible my understanding is incorrect here.

Everything else remains at default settings for the project.

Could it be something related to tsconfig-paths? Or perhaps there's a specific setting within the launch.json file that needs adjusting?

Thank you all for your assistance!

typescriptdebuggingvisual-studio-codelerna

Answer №1

In my Turborepo monorepo setup, I have 2 Nestjs apps and 1 NextJs app. The configuration I am using involves setting "type": "node-terminal" and then executing the standard development command in each repository using "command": "yarn dev --filter=app_name". This approach seems to work well for managing multiple projects under a single codebase.

Here is an example of how I have structured my 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"
            }
        }
    ]
}

Answer №2

Regrettably, I had to abandon the notion of utilizing https://github.com/Izhaki/mono.ts

By employing standard configuration files, I was able to successfully debug with lerna and even utilize serverless offline.

Here 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"
]

}

within my package directory, in case you require using 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 mark this as the accepted response even though it may not fully address the question, but it served as my resolution.

Hopefully, this assists someone.

Answer №3

I found a unique way to set up my project without using Lerna, even though it's a monorepo that utilizes Lerna.

Take a look at my custom launch.json:

{
  // Utilize IntelliSense for attribute suggestions.
  // Hover over attributes for descriptions.
  // Visit https://go.microsoft.com/fwlink/?linkid=830387 for more info.
  "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
    }
  ]
}

Also, here is my customized 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"]
}

Hopefully, this alternative setup can be beneficial for you and others!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

dependency tree resolution failed - ERESOLVE

I've been attempting to run an older project on my new system, but when running npm install, I keep encountering the following issue: https://i.sstatic.net/3AgSX.png Despite trying to use the same versions of Node and NPM as my previous system, noth ...

angulartypescriptnpmdependencies

How should I handle a situation where the placeholder type is set as a string, but the actual value is a number?

Within my TSX file, I have a component that serves as an input. import { InputHTMLAttributes } from "react"; interface InputProps extends InputHTMLAttributes<HTMLInputElement> { placeholder: string, label?: string, } export const ...

reactjstypescript

Bidirectional data binding in angular 12 reactive forms

After working with angular for a while, I encountered an issue while trying to implement two-way binding. The code snippet below is where I'm facing difficulty. Since the use of [(ngModel)] has been deprecated in Angular 12 within formGroup, finding ...

javascriptangulartypescriptformsangular12

What is the best way to showcase a collection of inherited objects in Angular?

How can I efficiently display a list of various objects that inherit from the same abstract class in an Angular application? What is considered optimal practice for accomplishing this task? Consider the following basic model: abstract class Vehicle { ...

angulartypescriptoop

Visual Studio encountering an error with AngularJS TypeScript integration

Hey everyone! I recently installed the angularjs.typescript and jquery.typescript packages from NuGet. However, I'm encountering errors in Visual Studio, as shown in the attached image. I'm using VS 2013 U4 and have updated all extensions and p ...

angularjstypescript

How can I designate node modules from a directory located outside the project's root folder?

In my project, I have multiple lambdas that utilize a lambda layer. The structure of the project is organized as follows: lambdas/ create/ index.ts delete/ index.ts layer/ nodejs/ node_modules I want to ensure that each TypeScript ...

typescriptnode-modules

Angular Error: Cannot call function panDelta on this.panZoomAPI

Check out my small demonstration using a stackblitz, I'm having an issue. In the setup, there's a master component with pan-zoom functionality containing a parent component with children content. The library in use is ngx-panzoom. The default c ...

angulartypescriptangular2-changedetectionpanzoom

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

javascriptangulartypescriptrxjs

"Unexpected Type Inference Issue: A variable initially defined as a string inexplicably transforms into 'undefined'

Currently, I am incorporating the await-to-js library for handling errors (specifically utilizing the to method from the library). In an intriguing scenario, the variable type shifts to string | undefined within a for..of loop, whereas outside of the loop ...

javascripttypescript

Troubleshooting Image Upload Problem with Angular, Node.js, Express, and Multer

While trying to implement the functionality of uploading an image, I have been referencing various guides like how to upload image file and display using express nodejs and NodeJS Multer is not working. However, I am facing issues with getting the image to ...

node.jsangulartypescriptexpressmulter

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

javascripttypescriptsap-cloud-platformsap-cloud-sdk

Send empty object using FormBuilder

When retrieving an object from a backend API service like this: data: {firstName:'pepe',lastName:'test', address = {street: 'Cervantes', city:'Villajoyosa'} } or data: {firstName:'pepe',lastName:'test ...

angulartypescript

Enable lazy loading to retrieve the current routed module

I'm currently working on a way to exclude a component when a specific module is routed in a lazy loading application. For instance, in my AppComponent I have a router-outlet and a component above it: <div> <my-component></my-compo ...

angulartypescriptlazy-loading

Is it true that a TypeScript derived class is not allowed to have identical variable names?

Why is it not allowed for TypeScript derived classes to have the same variable name, even if these members are private? Is there another way to achieve this, or am I making a mistake? class ClassTS { private nom: string = "ClassTS"; ...

typescript

Dividing a JSON object into arrays containing keys and values within an Angular framework

I have a code snippet that involves receiving a JSON object of type Tenant from an API. I need to separate this object into keys and values within my function called tenantParser(). However, when I try to log displayedValues and displayedKeys, both show ...

angulartypescript

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

javascripttypescriptjasmineappiumwebdriver-io

I am looking to have the datepicker automatically clear when the reset button is clicked

this code snippet is from my component.ts file resetFilters() { this.date = 0; this.query.startedAt= null; this.query.endedAt=null; this.searchTerm = ''; this.route.params.subscribe((params) => { this.machineId = Numb ...

angulartypescriptdatepicker

Which is the optimal choice: subscribing from within a subscription or incorporating rxjs concat with tap?

After storing data in the backend, I proceed to retrieve all reserved data for that specific item. It is crucial that the data retrieval happens only after the reservation process to ensure its inclusion. Presented with two possible solutions, I am cont ...

javascriptangulartypescriptrxjsobservable

Converting the 'require' call to an import may be a more efficient method when importing package.json in a typescript file

In my current project, I am creating a class where I am directly accessing the package version number like this: const pkg = require('../package.json') export class MyClass() { constructor() { // Set the base version from package.jso ...

javascripttypescript