Debug Next.js App with VSCode in NX monorepo

Question

I'm currently trying to debug a Next.js Application inside a NX monorepo.

I have enabled the Auto Attach setting in VSCode's User Settings.

When I start the Application using the serve command, I can see output in the Debug Console and also print out the current process by typing process or console.log(process) into the Debug Console.

However, I cannot set any breakpoints in the server side code, for example in getServerSideProps.

I checked Next.js Debugging Documentation for the missing pieces, and tried setting the NODE_OPTIONS='--inspect' in my Next.js Application via .env file.

Update: Seems like it's a missing feature on NX.

score 6 · Accepted Answer · answered Oct 19 '22 at 14:45

Got it working, thanks to the information from this Pull Request.

.vscode/launch.json

{
  "version": "0.2.0",
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
  "configurations": [
    {
      "name": "name-of-the-app – Server",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "nx",
        "run",
        "name-of-the-app:serve",
        "-r",
        "ts-node/register",
        "-r",
        "tsconfig-paths/register"
      ],
      "outputCapture": "std",
      "internalConsoleOptions": "openOnSessionStart",
      "console": "internalConsole",
      "env": {
        "TS_NODE_IGNORE": "false",
        "TS_NODE_PROJECT": "${workspaceFolder}/apps/name-of-the-app/tsconfig.json"
      },
      "cwd": "${workspaceFolder}/apps/name-of-the-app/"
    }
  ]
}

Note: I'm using yarn. You might have to replace it with npm instead.

I'm getting this error, any ideas? `> NX 'r' is not found in schema` — Tsvetelin, Jul 14 '23 at 06:50

Debug Next.js App with VSCode in NX monorepo

1 Answers1

.vscode/launch.json