How to debug a typescript create-react-app in visual studio code

Question

Steps to reproduce:

Set a breakpoint in any .tsx file
run my npm script "start": "react-scripts start",
start debugging with F5 or by selecting a configuration from the Run and Debug window in vscode.

Either configuration shown below results in an 'unverified breakpoint' in vscode.

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": "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 able to debug normal JavaScript and TypeScript projects in vscode without issue. My guess is that I have to change what 'react-scripts start' is doing, or account for where it's going to make .jsx files and sourcemaps in my launch.json. This is the guide I follow to debug TypeScript in vscode. In particular, this section explains what I believe is happening.

If no source map exists for the original source, or if the source map is broken and cannot successfully map between the source and the generated JavaScript, then breakpoints show up 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 tried this with both false and true (default value)
        "jsx": "react-jsx",
        "sourceMap": true // I've tried with this both true and false (default value)
      },
      "include": [
        "src"
      ]
    }

Do these answers not work for you? stackoverflow.com/questions/71412727/… — Lin Du
– Lin Du, Commented Jun 16, 2023 at 5:58
no i believe my problem is caused by the way create-react-scripts makes soucemap files — Robby
– Robby, Commented Jun 16, 2023 at 17:57
Does this answer your question? How to debug `create-react-app`s in visual studio code? — Jared Smith
– Jared Smith, Commented May 6, 2024 at 14:43

Albin Wilander · Accepted Answer · 2024-05-06 15:16:07Z

0

Maybe this doesn't fix the entire problem but one problem I had was that I missed to use this argument in the launch.json, I compile now without errors and I don't see that the sourcemaps are not found but my breakpoints still don't work.

Since you use ESM and not CommonJS then you need to look at this:

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

Add

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

To your launch.json

answered May 6, 2024 at 15:16

Albin Wilander

245 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to debug a typescript create-react-app in visual studio code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related