Using the VSCode debugger to place a breakpoint within a Typescript package that has been symlinked using `npm link`

I'm currently troubleshooting a NodeJS application and its associated typescript packages, which have been linked using `npm link`.

The directory structure is as follows:

/root/package-a # typescript package
/root/package-b # another typescript package
/root/app # NodeJS application

I have established links between the packages and the app in the following manner:

  1. Issued `npm link` command within each package
  2. Executed `npm link package-a package-b` in the app's directory

Additionally, in `/root/app/.vscode/launch.json`, I have included the following configuration:

"runtimeArgs": ["--preserve-symlinks"],
"outFiles": [
  "${workspaceFolder}/build/**/*.js",
  "${workspaceFolder}/../package-a/build/**/*.js",
  "${workspaceFolder}/../package-b/build/**/*.js",
]

Despite everything working seamlessly during the build process and changes being correctly reflected between packages and the app while in watch mode, setting breakpoints inside any of the packages in VS Code proves to be challenging. The debugger fails to locate the corresponding TS source, leaving the breakpoint greyed out :-(

https://i.sstatic.net/j2LfN.png

Additionally, each `tsconfig.json` has been configured with `"sourceMap": true`, resulting in `.js.map` files located next to each built file in both the app and the packages.

How can this setup be adjusted to ensure that breakpoints within the packages are displayed in red?

typescriptvisual-studio-codevscode-debuggersource-mapsnpm-link

Answer №1

  1. the launch.json should not contain both the runtimeArgs and the outFiles. It should be structured like this:

     {
   "version": "0.2.0",
    "configurations": [
 {
   "type": "node",
   "request": "launch",
   "sourceMaps": true,
   "smartStep": true,
   "name": "Launch event",
   "program": "${workspaceFolder}/src/services/event/src/start.ts",
   "outputCapture": "std",
   "envFile": "${workspaceFolder}/src/services/event/.env"
 }

    ] }

  2. Ensure that the vscode symlink icon is visible (logger) (in the lib you symlinked) : https://i.sstatic.net/E4yoM.png

  3. To create a symlink, follow these steps (logger):

https://i.sstatic.net/WYgOw.png

  1. Most importantly, you need to build the npm (in this example - logger). After building it, check the node_modules of the service (or root) to ensure that your changes are built and can be found inside the node_modules (the symlink should handle this)

https://i.sstatic.net/d6MlM.png

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

Transitioning from ng-repeat filter to Typescript

As I migrate my project from AngularJS to modern Angular 8, one of the steps is converting JavaScript code to TypeScript. During this process, I encountered a challenging issue with the `ng-repeat` filter feature. Initially, my HTML template looked like t ...

javascriptangularjstypescriptangularjs-ng-repeat

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Seeking assistance with maintaining directory structure when compiling Typescript to Javascript in Intellij Idea. The current directory setup is as follows: root - ts - SomeClass1.ts - SomeFolder - AwesomeClass2.ts - tsc The desired compiled file ...

javascriptintellij-ideatypescript

The debate between TypeScript default generic types and contextual typing

Contextual Typing in TypeScript is an interesting feature where the correct type is inferred from the return value when a generic type is not specified. While it usually works well, there are instances where it can be unpredictable. For example, in some c ...

typescripttypescript-generics

Utilizing images in a compiler run with the option of `allowJS:true` is key

Looking to develop a React Native library using JavaScript instead of typescript, but want to leverage TSC for its ability to generate type declarations from jsdoc comments. However, encountering an issue where local images are not included when the ts com ...

typescripttsc

DuplicateModelError: Unable to duplicate model after it has been compiled, React.js, MongoDB, TypeScript

In the early stages of developing an application using Next.js, Mongoose, and Typescript, I encountered a persistent issue. Whenever I attempt to send a request through Postman after clicking save, it fails, displaying the error message: OverwriteModelErr ...

typescriptmongodbmongoosenext.jspostman

What is the process for implementing a decorator pattern using typescript?

I'm on a quest to dynamically create instances of various classes without the need to explicitly define each one. My ultimate goal is to implement the decorator pattern, but I've hit a roadblock in TypeScript due to compilation limitations. Desp ...

javascripttypescriptproxydecorator

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...

javascripthtmljsonangulartypescript

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

htmlcssangulartypescriptgoogle-visualization

Encountering an issue with the UNION operator in Typescript causes an error

Currently, I am utilizing the OR operator within Typescript to designate that a product could be of type ProductI OR CartResponseInterface.Product This is how it is structured: product: ProductI | CartResponseInterface.Product However, when attempting t ...

javascriptangulartypescript

NextJS is facing a dilemma as it struggles to understand why a simple prop passing to display a p tag is not rendering anything. Could the issue lie in data fetching and display

Working in NextJS, I set up an api endpoint, debugged client state issues, and ensured my state variables were correct. However, I am still unable to render the expected output. I am attempting to display a JSON object like this: [{"id":"cl ...

reactjstypescriptnext.js

The variable "$" cannot be found within the current context - encountering TypeScript and jQuery within a module

Whenever I attempt to utilize jQuery within a class or module, I encounter an error: /// <reference path="../jquery.d.ts" /> element: jQuery; // all is good elementou: $; // all is fine class buggers{ private element: jQuery; // The nam ...

javascriptjquerytypescript

Tips for stopping TypeScript code blocks from being compiled by the Angular AOT Webpack plugin

Is there a way to exclude specific code from Angular's AOT compiler? For instance, the webpack-strip-block loader can be utilized to eliminate code between comments during production. export class SomeComponent implements OnInit { ngOnInit() { ...

angulartypescriptwebpack

Error: Angular2 RC5 | Router unable to find any matching routes

I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" whi ...

javascriptangulartypescriptmodulerouter

Encountering an issue with MUI Props: "Must provide 4 to 5 type arguments."

I'm attempting to use a custom component and pass in AutocompleteProps as a prop, all while utilizing typescript. Here's my current setup: type Props = { autoCompleteProps?: AutocompleteProps<T> label: string loading?: boolean } cons ...

reactjstypescriptmaterial-ui

Encountering Issue: NG0303 - Unable to associate 'ng-If' as it is not recognized as a valid attribute of 'app-grocery'

NG0303: Encountering an issue with binding to 'ng-If' as it is not recognized as a valid property of 'app-grocery'. A similar problem was found here but did not provide a solution Despite importing CommonModule in app.modules.ts, I am ...

angulartypescriptweb-applications

Different Categories of Array Deconstruction

While iterating through an array, I am utilizing destructuring. const newArr = arr.map(({name, age}) => `${name} ${age}`) An error occurs in the above code stating: Binding element 'name' implicitly has an 'any' type To resolve th ...

javascripttypescript

Issue encountered while attempting to package Azure project in Visual Studio 2015 Update1 due to difficulty copying Typescript files

Since upgrading to VS 2015 Update 1 (that includes Typescript 1.7) and Azure SDK 2.8, packaging my Azure application for deployment has become a challenge due to an error in the file path where the packager is attempting to copy the js output file: Erro ...

azuremsbuildtypescriptvisual-studio-2015

Is it possible that a declaration file for module 'material-ui/styles/MuiThemeProvider' is missing?

I have been trying to implement the react material-ui theme after installing it via npm. However, I am encountering errors when adding 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx: TS7016: Could not ...

visual-studioreactjstypescriptnpmmaterial-ui

What could be the missing piece? The function is expected to provide a return value

Currently, I am developing a Typescript Express API and encountering an issue with one of my methods. The problem arises when trying to handle data received in a callback function. public async getAll(): Promise<GeneralResponse> { locationsRe ...

node.jstypescriptexpress

Encountered an error in production mode with Angular 7: Uncaught ReferenceError - "environment" variable

During development, my application runs smoothly, and ng build --prod --source-map successfully compiles the application. However, when attempting to access it through the browser, an error occurs: app.module.ts:47 Uncaught ReferenceError: env is not defi ...

javascriptangulartypescriptnpmangular-cli