Tips for troubleshooting a TypeScript create-react-app in Visual Studio Code

Instructions to replicate the issue:

  1. Place a breakpoint in any .tsx file

  2. execute my npm script 

    "start": "react-scripts start",

  3. commence debugging with F5 or by choosing a configuration from the Run and Debug window in vscode.

Both configurations provided below lead to an 'unverified breakpoint' in vscode.

launch.json

    {
    // Utilize IntelliSense to understand potential attributes.
    // Hover over to see explanations of current attributes.
    // For more details, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Firefox",
            "request": "launch",
            "type": "firefox",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "enableCRAWorkaround": true
        },
        {
            "name": "Launch Firefox",
            "request": "launch",
            "type": "firefox",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "enableCRAWorkaround": false
        }
      ]
    }

I am capable of debugging typical JavaScript and TypeScript projects in vscode without any challenges. I presume that I need to modify what 'react-scripts start' is performing, or address where it's intended to generate .jsx files and sourcemaps in my launch.json. This is the resource I adhere to for debugging TypeScript in vscode. More specifically, this segment explains my interpretation of the situation.

If there is no source map available for the original source, or if the source map is defective and cannot effectively link between the source and the generated JavaScript, then breakpoints will display as unverified (gray hollow circles).

tsconfig.json

    {
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false, // I've experimented with both false and true (default value)
        "jsx": "react-jsx",
        "sourceMap": true // I've tried this with both true and false (default value)
      },
      "include": [
        "src"
      ]
    }
typescriptvisual-studio-codewebpackcreate-react-app

Answer №1

Perhaps this solution may not resolve all issues, but one issue I encountered was forgetting to include a certain argument in the launch.json file. Now that I have compiled without errors and no longer see issues with sourcemaps, my breakpoints still do not function as expected.

If you are using ESM instead of CommonJS, it is important to take note of the following:

https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_how-do-i-debug-ecmascript-modules

Include the following in your launch.json file:

"runtimeArgs": [
                //other args here,
                "--experimental-modules"
            ],

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

Webpack: Failure to Locate Node Modules

Today while working with webpack, I encountered an issue where it was unable to resolve common node modules like fs and inspect. Upon investigating, I came across a helpful solution on GitHub which suggested setting the modules to none through webpack&apos ...

node.jsnpmwebpacknode-moduleswebpack-config

Adding items to the array is only effective when done within the loop

My approach involves retrieving data from an API using axios, organizing it within a function named "RefractorData()," and then pushing it onto an existing array. However, I have encountered a problem where the array gets populated within a forEach loop, a ...

javascriptarraysnode.jstypescript

What is the purpose of running tsc --build without any project references?

Out of curiosity, I decided to experiment by executing tsc --build on a project without any project references. Surprisingly, the command ran smoothly and completed without any issues. I expected there to be a warning or error since the build flag is typic ...

typescript

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Array#map and Array#filter both create a new array, effectively iterating over the original array each time. In languages like rust, python, java, c#, etc., such expression chains only iterate once, making them more efficient in certain cases. While this ...

javascripttypescript

Error displaying messages from the console.log function within a TypeScript script

My node.js application runs smoothly with "npm run dev" and includes some typescript scripts/files. Nodemon is used to execute my code: This is an excerpt from my package.json file: { "scripts": { "start": "ts-node ./src/ind ...

node.jstypescriptnpmnodemon

Develop a set of matching key/value pairs using TypeScript

Looking to develop a custom data type where InputKeys will serve as the keys, and the values will be key/value pairs. The keys should correspond to InputFieldKey, with the value being a string. My current progress includes {[key: string]: string}, but I n ...

typescript

Utilizing variables for Protractor command line parameters

I am struggling to make variables work when passing parameters as a string in my code. Conf.ts params: { testEnvironment: TestEnvironment.Prod, }, env.ts export enum TestEnvironment { Dev = 'dev', QA = 'qa', Prod ...

typescriptautomationprotractor

Ways to prevent encountering the "ERROR: Spec method lacks expectations" message despite achieving success

My Angular HTTP service is responsible for making various HTTP calls. Below is a snippet of the service implementation: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() expor ...

angulartypescriptunit-testingjasminekarma-jasmine

An effective method to utilize .map and .reduce for object manipulation resulting in a newly modified map

Here's an example of what the object looks like: informations = { addresses: { 0: {phone: 0}, 1: {phone: 1}, 2: {phone: 2}, 3: {phone: 3}, 4: {phone: 4}, 5: {phone: 5}, }, names: { 0 ...

javascripttypescriptloopsreducearray.prototype.map

Angular utilizes ZoneAwarePromise rather than a plain String output

I expected the giver code to return a string, but it is returning ZoneAwarePromise. Within the service: getCoveredPeriod() { let loanDetails = this.getLoanDetails().toPromise(); loanDetails.then((res: any) => { const coveredPeriodStart ...

javascriptangulartypescriptpromiserxjs

What causes the error message saying 'undefined' cannot be assigned to the specified type ...?

I just finished developing an innovative Angular application. Within the app.component.html file, I have included: <bryntum-scheduler #scheduler [resources] = "resources" [events] = "events" [columns] = "schedul ...

angulartypescriptbryntum-scheduler

When you import objects in Typescript, they may be undefined

I have a file called mock_event that serves as a template for creating an event object used in unit testing. Below, you can find the code snippet where this object is initialized: mock_event.ts import {Event} from "../../../models/src/event"; im ...

typescriptimport

Is app.component.ts necessary in an Angular 2 project?

Currently diving into Angular 2 and have a burning question on my mind. Do I really need the app.component.ts file in my project? Each of my folders has its own component and template, so I'm debating if the main component is necessary or if I can rem ...

angulartypescript

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Mastering the art of leveraging generics in conjunction with ngrx actions

Currently, I am in the process of developing an Angular 7 application that utilizes the NGRX store. In our application, we have numerous entities, each with its own dedicated list view. I decided to explore using generics with the NGRX store to avoid writi ...

typescriptngrx

What is the best way to trim a string property of an object within an array?

I am seeking a solution to access the "description" property of objects within an array and utilize a string cutting method, such as slice, in order to return an array of modified objects. I have attempted using for loops but have been unsuccessful. Here ...

javascriptarraystypescriptobjectslice

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

When dynamically adding a directive, the directive is correctly generated in the output schema. However, it seems to be missing when applied to specific fields. Here is how the directive was created: const limitDirective = new graphql.GraphQLDirective({ na ...

javascripttypescriptgraphqlgraphql-jsgraphql-tools

Facing problem with implementing NgMoudleFactoryLoader for lazy loading in Angular 8

A situation arose where I needed to lazy load a popups module outside of the regular router lazy-loading. In order to achieve this, I made the following adjustments: angular.json "architect": { "build": { ... "options": { ... "lazyM ...

javascriptangulartypescript

Narrowing Down State Types

I am working on a functional component in NextJS with props passed from SSR. The component has a state inside it structured like this: const MyComponent = ({err, n}: {err?: ErrorType, n?: N})=>{ const [x, setX] = useState(n || null) ... if(e ...

reactjstypescriptnext.js

Converting Typescript objects containing arrays into a single array

Looking for some assistance with this problem :) I am trying to convert the object into an array with the following expected result: result = [ { id: 'test-1', message: 'test#1.1' }, { id: 'test-1', mess ...

javascriptarraysangulartypescriptobject