NextJS VSCode Typescript ==> Breakpoints unbound

Question

I follow Next.js instructions in this document: https://nextjs.org/docs/advanced-features/debugging#using-the-debugger-in-visual-studio-code

To try to debug my Next.js project. The process starts, the debugger attaches correctly and shows the log messages from debugging. However, when I set a break point, it remains faded and VSCode says "unbound breakpoint" when I hover it. Not to mention, the debugger won't stop in the breakpoint.

However, if I use the keyword "debugger" then the debugger does stop in the place where I used it.

My system:

"next": "9.4.4",

tsconfig.json:

{
  "compilerOptions": {
    "downlevelIteration": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "sourceMap": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowUnreachableCode": false,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "types/": [
        "src/types/index"
      ],
      "types/*": [
        "src/types/*",
        "src/types/index"
      ],
      "data/*": [
        "src/data/*"
      ],
    },
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.js"
  ],
  "compileOnSave": true
}

Answer 1

I had Breakpoints unbound issue with TypeScript + React. Here is my launch.json, I added these properties and I got it working:

  "sourceMaps": true,
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/dist/*",
  "webpack:///src/*": "${webRoot}/dist/*"
  }
}

Full launch.json:

 {

  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug React Run",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/dist/*",
          "webpack:///src/*": "${webRoot}/dist/*"
      }
    }
  ]
}

Answer 2

You should probably mark the breakpoint first, and only then start the debugger