How to run NextJS client side debugger in VSCode in nx workspace

Question

I have 2 frontend applications running in nx workspace, Both of them are next js applications. The client-side debugging is not working as all the breakpoints and log points added are shown as unbounded. But the server-side debugger attached is working perfectly fine.

I have the following launch.json file for vs code.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/super-admin/*"
      }
    },
    {
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "${workspaceFolder}/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    }
  ]
}

I guess it's failing due to typescript and nx workspace configuration, which is somehow related to the source map.

The NextJS applications are running in debug mode because I have added the following in the .env file, Which I got from looking at nx GitHub issues.

NODE_OPTIONS=--inspect=0.0.0.0:9229

Following is my directory structure

project
├── apps
│   ├── org-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   ├── org-admin-e2e
│   │   ├── cypress.json
│   │   ├── src
│   │   │   ├── fixtures
│   │   │   │   └── example.json
│   │   │   ├── integration
│   │   │   │   └── app.spec.ts
│   │   │   └── support
│   │   │       ├── app.po.ts
│   │   │       ├── commands.ts
│   │   │       └── index.ts
│   │   └── tsconfig.json
│   ├── super-admin
│   │   ├── index.d.ts
│   │   ├── jest.config.js
│   │   ├── next.config.js
│   │   ├── next-env.d.ts
│   │   ├── pages
│   │   │   ├── _app.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.css
│   │   ├── public
│   │   ├── specs
│   │   │   └── index.spec.tsx
│   │   ├── tsconfig.json
│   │   └── tsconfig.spec.json
│   └── super-admin-e2e
│       ├── cypress.json
│       ├── src
│       │   ├── fixtures
│       │   │   └── example.json
│       │   ├── integration
│       │   │   └── app.spec.ts
│       │   └── support
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       └── tsconfig.json
├── babel.config.json
├── jest.config.js
├── jest.preset.js
├── libs
├── nx.json
├── package.json
├── package-lock.json
├── README.md
├── tools
│   ├── generators
│   └── tsconfig.tools.json
├── tsconfig.base.json
└── workspace.json

Answer 1

Based on your answer and The NX debug guide, I also came up with a solution that will run both client and server. It starts the server, but I imagine it could also be used to attach to a running server similar to how you run 'Org Admin | Server Side'. Same with using Edge instead of Chrome. The key being that WebRoot is required for the Client, SourceMap params are required for Server, and serverReadyAction is used to start the Client on Server start success.

{
  "version": "0.2.0",
  "configurations": [
    {
      // **1**
      "name": "Launch Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/apps/<application>",
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "nx run <application>:serve",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/<application>/*",
        "webpack:///../../libs/*": "${workspaceFolder}/libs/*",
      },
      "serverReadyAction": {
        "action": "startDebugging",
        // Must me the same as **1**
        "name": "Launch Client",
        // Must be the same as the [ready] output from the server
        "pattern": "on http://localhost:4200" 
      }
    }
  ]
}

Note: I did not have to setup the --inspect with this method.

Answer 2

After a lot of research the following launch.json helped me debug both the server side and the client side of the nextjs app in an nx workspace

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Org Admin | Server Side",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/apps/org-admin/*"
      }
    },
    {
      "name": "Org Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}/apps/org-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    },
    {
      "name": "Super Admin | Server Side",
      "port": 9230,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/super-admin/*"
      }
    },
    {
      "name": "Super Admin | App",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "http://localhost:3002",
      "webRoot": "${workspaceFolder}/apps/super-admin",
      "userDataDir": false,
      "runtimeExecutable": "/usr/bin/microsoft-edge-beta"
    }
  ]
}