Next.js Discord

Discord Forum

[Issue] Full Stack Debugging in VSCode with Turbo Repo

Answered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
I am setting up a Next.js web application with Turbo Repo and I am running into some issues with the full-stack debugger.

Here are the steps to reproduce
1. Setup a basic turborepo example app using pnpm as the package manager https://github.com/vercel/turbo/tree/main/examples/basic
2. In .vscode/launch.json at the root of the repository, add the following configuration as suggested by the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/configuring/debugging#debugging-with-vs-code)
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Web: Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "runtimeVersion": "20",
      "program": "${workspaceFolder}/apps/web/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}/apps/web"
      }
    }
  ]
}

3. Run the Web: Next.js: debug full stack task from the VSCode debugger
4. You should receive the following error
/Users/foo/.nvm/versions/node/v20.11.1/bin/node --inspect ./apps/web/node_modules/.bin/next
Process exited with code 1
Uncaught SyntaxError /Users/foo/my-project/apps/web/node_modules/.bin/next:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
     (...)


Here is what I get with next info in web
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: 8.9.0
Relevant Packages:
  next: 14.1.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A


Any advice?
Answered by Schneider’s Smooth-fronted Caiman
@Polar bear try 
{
  "name": "Next.js: debug full stack",
  "type": "node-terminal",
  "request": "launch",
  "command": "npm run dev",
  "cwd": "${workspaceFolder}", //you may need to change this to the root of your project
  "serverReadyAction": {
    "pattern": "started server on .+, url: (https?://.+)",
    "uriFormat": "%s",
    "action": "debugWithChrome"
  }
}
View full answer

4 Replies

American
@Polar bear did u solve this by any chance?
Polar bearOP
I did not unfortunately
Schneider’s Smooth-fronted Caiman
@Polar bear try 
{
  "name": "Next.js: debug full stack",
  "type": "node-terminal",
  "request": "launch",
  "command": "npm run dev",
  "cwd": "${workspaceFolder}", //you may need to change this to the root of your project
  "serverReadyAction": {
    "pattern": "started server on .+, url: (https?://.+)",
    "uriFormat": "%s",
    "action": "debugWithChrome"
  }
}
Answer
Polar bearOP
@Schneider’s Smooth-fronted Caiman Sorry for the late reply, have been fixing other issues in my repo in the meantime, but just wanted to come back and say this worked like a dream! 💖 Thank you so much!