Can't debug React Typescript in VS Code

Question

I am trying to debug a React Typescript application in VS Code and I can't figure out how to configure the launch.json to get TSX debugging to work.

I am using webpack to bundle everything into one js file

This is my package.json

 {
  "name": "reactts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "magic": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "axios": "^0.18.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.4"
  }
}

and this is my tsconfig.json file

{
    "compilerOptions": {
      "target": "es6",
      "jsx": "react",
      "module": "commonjs"
    },
    "exclude": [
      "node_modules"
    ]
}

And this is my webpack.config.js file

var path = require("path");
var config = {
  entry: ["./src/app.tsx"],
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  }
};

module.exports = config;

I use npm run magic to compile the tsx code into the bundled js file

xIsra · Accepted Answer · 2019-07-15 13:47:49Z

11

I'm not using webpack but only the script provided by react create-app (npm start = react-scripts start), and then I launch Chrome Debugger using VS Code debug configuration:

Pointing directly to the source /src of the app where app.tsx and index.ts are located.

React -v 16.8.6 Node -v 10.16.0

{
    "type": "chrome",
    "request": "launch",
    "name": "Debug React Run",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}/src"
}

If ill find a solution for webpack I'll update.

answered Jul 15, 2019 at 13:47

xIsra

9151 gold badge10 silver badges21 bronze badges

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

Comments

Patrick Hume · Accepted Answer · 2022-06-15 19:04:34Z

2

in the launch.json file inside the .vscode put the following

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Run npm start in VSC terminal, the Brower should load, back in VSC just press F5 and you should be attached and able to debug

see Ref!

I hope this helps

edited Jun 15, 2022 at 19:04

answered Jun 15, 2022 at 19:02

Patrick Hume

2,2241 gold badge5 silver badges14 bronze badges

1 Comment

David Fischer Over a year ago

Worked for me. But don't forget to rebuild your source files before every launch.

Collectives™ on Stack Overflow

Can't debug React Typescript in VS Code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related