CODEWITHSUNDEEP
typescriptvisual-studio-codenext.js
JJ F
JJ F

Reputation: 1539

NextJS VSCode Typescript ==> Breakpoints unbound

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
}

Upvotes: 22

Views: 11431

Answers (5)

Nitiraj
Nitiraj

Reputation: 644

While following the nextjs doc and Next.js: debug server-side launch configuration for windows, I was also getting same issue while trying to debug server side code. I was able to fix it by removing the --turbopack from the package.json. I was working on nextjs-dashboard sample application which already has this in package.json: https://github.com/vercel/next-learn/tree/main/dashboard/starter-example

Eg.

  "scripts": {
    "build": "next build",
    "dev": "next dev --turbopack",   # remove this --turbopack
    "start": "next start"
  },

I am new to nextjs so don't know what effect does --turbopack creates and why removing it fixed the debugging breakpoint issue. But my gut feeling says that there has to be some fix

Upvotes: 0

Abdullah Al Muzaki
Abdullah Al Muzaki

Reputation: 23

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.

    useEffect(() => {
      debugger
      foo()
    }, [bar])

Example Result

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

Upvotes: 2

yellowtail
yellowtail

Reputation: 21

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.

Upvotes: 2

Андрей Зорин
Андрей Зорин

Reputation: 20

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

Upvotes: -2

Alan Svits
Alan Svits

Reputation: 192

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/*"
      }
    }
  ]
}

Upvotes: 2

Related Questions