Guidance on debugging Catalyst

[jmahony]

Hello!

Ever since the --turbo flag was added with this commit our team has been having issues debugging the project. Breakpoints fail to bind in the core project, other packages such as client work as expected. The only workaround we've found is to remove the --turbo flag which doesn't seem ideal.

We're using VSCode via WSL on Windows 11.

Our previously working launch.json as per the Next.js docs:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm run dev",
      "cwd": "${workspaceFolder}/core"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug client-side (Firefox)",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "reAttach": true,
      "pathMappings": [
        {
          "url": "webpack://_N_E",
          "path": "${workspaceFolder}"
        }
      ]
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

Any guidance would be appreciated.

[deini]

This seems related, are you seeing a similar error?

vercel/next.js#72789

Is it not working on any of those profiles (ie: server-side / full stack)? Or are some of them working?

[jmahony]

Thank you for your reply :)

Full stack

To be honest I've not really tried to use full stack, but it doesn't work at all. With the config I provided above I get the error:

Uncaught Error Error: Cannot find module '/home/josh/projects/catalyst/node_modules/.bin/next'
    at Module._resolveFilename (internal/modules/cjs/loader:1225:15)
    at Module._load (internal/modules/cjs/loader:1051:27)
    at executeUserEntryPoint (internal/modules/run_main:174:12)
    at <anonymous> (internal/main/run_main_module:28:49)

If I update the program field with "${workspaceFolder}/core/node_modules/.bin/next" I then get the error:

Process exited with code 1
Uncaught SyntaxError /home/josh/projects/catalyst/core/node_modules/.bin/next:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader:1378:20)
    at Module._compile (internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (internal/modules/cjs/loader:1548:10)
    at Module.load (internal/modules/cjs/loader:1288:32)
    at Module._load (internal/modules/cjs/loader:1104:12)
    at executeUserEntryPoint (internal/modules/run_main:174:12)
    at <anonymous> (internal/main/run_main_module:28:49)

Server-side

With server-side, I don't appear to get any errors in the debug console like in the link you've provided:

It just looks like the source maps are loaded when using the --turbo flag.

As a note, I'm testing this with catalyst/main to ensure it has nothing to do with our changes.

I should also say client-side debugging in Chrome is working perfectly, this is just server-side. My issue sounds similar to this: vercel/next.js#62008, but isn't isolated to server components.