Unable to Set Breakpoints in VSCode When Debugging React + TypeScript + Webpack

29 Views Asked by At

Issue: I'm trying to debug an app built with

React, TypeScript, and Webpack in VSCode,

but breakpoints are not being hit.

When I run the server and try to debug by pressing F5 in vscode,

I get an unbound breakpoint. it doesn't work.

Folder Structure:

enter image description here

Key File Contents:

root/package.json:

{
  "name": "flight-spotter",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "author": {
    "name": "Jan Hartmann",
    "email": "[email protected]",
    "url": "https://janhartmann.dk"
  },
  "homepage": "https://github.com/janhartmann/flight-spotter",
  "scripts": {
    "install": "concurrently --prefix-colors magenta,blue -n server,client \"yarn server:install\" \"yarn client:install\"",
    "start": "gql-gen && concurrently --prefix-colors magenta,blue -n server,client \"yarn server:start\" \"yarn client:start\"",
    "build": "gql-gen && concurrently --prefix-colors magenta,blue -n server,client \"yarn server:build\" \"yarn client:build\"",
    "server:install": "cd server && yarn install",
    "server:build": "cd server && yarn build",
    "server:start": "cd server && yarn start",
    "client:install": "cd client && yarn install",
    "client:build": "cd client && yarn build",
    "client:start": "cd client && yarn start"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.2.0",
    "@graphql-codegen/fragment-matcher": "^1.2.0",
    "@graphql-codegen/typescript-compatibility": "^1.2.0",
    "@graphql-codegen/typescript-operations": "^1.2.0",
    "@graphql-codegen/typescript-react-apollo": "^1.2.0",
    "@graphql-codegen/typescript-resolvers": "^1.2.0",
    "concurrently": "^4.1.0",
    "graphql": "^14.3.0"
  }
}

root/tsconfig.json:

{
  "compilerOptions": {
    "rootDirs": ["client/src"],
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "lib": ["dom", "esnext"],
    "sourceMap": true,
    "noImplicitThis": true,
    "noImplicitAny": true
  },
  "exclude": ["node_modules", "dist"]
}

VSCode launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/client",
            "sourceMaps": true
        }
    ]
}
0

There are 0 best solutions below