21

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:

enter image description here

"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
}
2
  • 2
    Did you ever find an answer to this? Aug 15, 2020 at 3:03
  • @NateWeiner sorry for the late answer. Actually, I didn't. I ditched vscode in favor of webstorm where I did not get this issue.
    – Alan Svits
    Apr 6, 2022 at 11:50

3 Answers 3

2

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/*"
      }
    }
  ]
}
2
  • I had the same problem when creating an extension, ie. with "type": "extensionHost", and this solution worked for me.
    – marzetti
    Dec 2, 2021 at 3:59
  • 4
    I don't see how it's related to Next JS. There is neither a src folder, nor a dist one.
    – Onkeltem
    Apr 6, 2022 at 11:12
0

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.

-2

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

2
  • What do you mean by mark a breakpoint?
    – Timo
    Mar 15, 2022 at 13:31
  • It doesn't work anyway
    – Onkeltem
    Apr 6, 2022 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.