Why am I seeing Node.js instead of TypeScript when I open VSCode?

I am facing an issue while debugging a TypeScript file in VSCode. When I try to launch it, instead of calling TypeScript on the file first, VSCode launches "node CheckFMBackup.ts" before "node CheckFMBackup.js". Can someone explain why this is happening? Could it be a misconfiguration on my end?

The reason I suspect node is being called instead of TypeScript is evident in the screenshot provided below. Breakpoints have been enabled for checked and unchecked exceptions.

Here is a snippet from CheckFMBackup.ts:


        const BITQUERY_API_URL = "";
        const BITQUERY_API_KEY = "";
        const axios = require("axios");
        
        async function makeRequest(query: string) {
            const result = await axios.post(BITQUERY_API_URL, {
                query: query,
                headers: {
                    "Content-Type": "application/json",
                    "X-API-KEY": BITQUERY_API_KEY
                }
            });
          
            return result.data;
        }
    

This is how my launch.json looks like:

{
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Program",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "program": "${workspaceFolder}\\CheckFMBackup.ts",
                "outFiles": [
                    "${workspaceFolder}/out/**/*.js"
                ],
                "preLaunchTask": "tsc: build - tsconfig.json", 
            }
        ]
    }
    

And here is a glimpse of tasks.json:

{
        "version": "2.0.0",
        "tasks": [
            {
                "type": "typescript",
                "tsconfig": "tsconfig.json",
                "problemMatcher": [
                    "$tsc"
                ],
                "group": {
                    "kind": "build",
                    "isDefault": true
                },
                "label": "tsc: build - tsconfig.json"
            }
        ]
    }
    

Lastly, my tsconfig.json configuration:

{
      "compilerOptions": {
        /* Visit https://aka.ms/tsconfig.json to read more about this file */
    
        "target": "es2017",
        "module": "es2020",
        "outDir": "./out",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
      }
    }
    

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

Answer №1

Consider making some changes to your preLaunchTask. It's a good idea to assign a specific name to the task in your launch.json file

{
    "configurations": [
        {
            ...
            "preLaunchTask": "tscBuild"
        }
    ]
{

Additionally, update your tasks.json with the following:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tscBuild",
            "command": "tsc: build - tsconfig.json",
            ...
      
        },
}

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

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

Dealing with API Errors in Ngrx

I came across an interesting scenario in the ngrx example-app provided on Github. When starting a new project, I always strive to follow the best practices, so I referred to the example app for guidance. In one particular instance within the application, t ...

Is there a way to execute the run function of a different Component in Angular 7 without causing the current

Is there a way to execute the ngOnInit() function from one component inside another component without needing to refresh the existing page? ...

Error encountered in Angular NGRX while accessing the store: Trying to read property 'map' of an undefined variable

I have integrated NGRX effects into my Angular application and encountered the following error. I'm uncertain if I am using the selector correctly in my component to query the store? core.js:6162 ERROR TypeError: Cannot read property 'map' o ...

Creating a sidebar in Jupyter Lab for enhanced development features

Hi there! Recently, I've been working on putting together a custom sidebar. During my research, I stumbled upon the code snippet below which supposedly helps in creating a simple sidebar. Unfortunately, I am facing some issues with it and would greatl ...

Issue with MUI 5 Button component not receiving all necessary props

Currently, I am attempting to create a customized MUI5-based button in a separate component with the following code: import {Button, buttonClasses, ButtonProps, styled} from '@mui/material'; interface MxFlatButtonProps extends Omit<ButtonProp ...

Iterating through elements within the ng-content directive in Angular using *ngFor

Is it possible to iterate through specific elements in ng-content and assign a different CSS class to each element? Currently, I am passing a parameter to enumerate child elements, but I would like to achieve this without using numbers. Here is an example ...

What could be causing the "Failed to compile" error to occur following the execution of npm

Exploring react with typescript, I created this simple and basic component. import React, { useEffect, useState } from "react"; import "./App.css"; type AuthUser = { name: string; email: string; }; function App() { const [user, setUser] = useState& ...

Building a customizable class from scratch

I am currently working on developing configurable classes that come with default values, but allow for configuration changes if needed. The concept involves creating an instance of a class by calling its type specified in the static properties of the Test ...

A circular reference occurs when a base class creates a new instance of a child class within its own definition

My goal is to instantiate a child class within a static method of the base class using the following code: class Baseclass { public static create(){ const newInstance = new Childclass(); return newInstance; } } class Childclass ex ...

Is there a better approach to verifying an error code in a `Response` body without relying on `clone()` in a Cloudflare proxy worker?

I am currently implementing a similar process in a Cloudflare worker const response = await fetch(...); const json = await response.clone().json<any>(); if (json.errorCode) { console.log(json.errorCode, json.message); return new Response('An ...

Order of Execution

I am facing an issue with the order of execution while trying to retrieve values from my WebApi for input validation. It appears that the asynchronous nature of the get operation is causing this discrepancy in execution order. I believe the asynchronous b ...

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

Can someone please explain the meaning of this error message? I'm new to Angular and currently using Angular 8. This error is appearing on my console. ERROR TypeError: Cannot read property 'invalid' of undefined at Object.eval [as updat ...

Utilize Javascript to compare nested objects and store the differences in a separate object

I have a dilemma involving two JavaScript objects var order1 = { sandwich: 'tuna', chips: true, drink: 'soda', order: 1, toppings: [{VendorNumber: 18, PreferredFlag: false, SupportedFlag: true}, {VendorNumber: 19, ...

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...

Managing optional props in Typescript React depending on the type of another prop

I am in the process of developing a fetcher component API. The concept is quite straightforward - you provide it with a fetcher (a function that returns a promise) and a params array (representing positional arguments) as props, and it will deliver the res ...

What is the best way to configure Jenkins to exclude or include specific component.spec.ts files from being executed during the build

Currently, I am facing an issue while attempting to include my spec.ts files in sonarqube for code coverage analysis. However, my Jenkins build is failing due to specific spec.ts files. Is there a way to exclude these particular spec.ts files and include ...

Encountering an issue where the useMutation function is not recognized on the DecorateProcedure<MutationProcedure> type while attempting to utilize the useMutation feature

Currently, I am utilizing the NextJS app router. I am attempting to invoke a rather straightforward route: import { z } from "zod"; import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; // document sending user email to waitlist da ...

If I include the Next.js Image component within a React hook, it may trigger the error message "Attempting to update state on an unmounted component in React."

My UI layout needs to change when the window width changes. However, when I add an Image (Nextjs component) in my hook, I encounter an error message. I am not sure why adding Image (Nextjs component) is causing this problem. The error message is display ...

Is it possible to import node_modules from a specific directory mentioned in the "main" section of the package.json file?

Is it feasible to import from a source other than what is defined by the "main" setting? In my node_modules-installed library, the main file is located at lib/index.js With es2015 imports (source generated from ts compiled js), I can use the following ...