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

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

CodePudding user response：

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