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

If your breakpoint is set on a component that is not loaded from the home page of your app, then after launching the client-side debugger in VS Code the breakpoint will be faded and say "Unbound breakpoint" in the tooltip.

However, after you navigate in your app so that the component is loaded, then the breakpoint will go red and the debugger will stop on that line.

This is using the default Nextjs app layout and following the Nextjs debugging documentation.

Answer 3

For those who still not found the solutions, but need the debugging functionality in the NextJS FE, this is the workaround: You can use chrome debugger as alternative to vscode red dot marker. Simply insert the word "debugger" wherever you wish to initiate debugging.

Example Result

https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-chrome-devtools

Answer 4

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