Cannot debug a NestJS API when using integrated monorepo

[leandroluk]

Current Behavior

I had created empty project using PNPM and add a @nx/nest using

> pnpx create-nx-workspace@latest test   
Packages: +56
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 56, reused 55, downloaded 1, added 56, done

 NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

√ Which stack do you want to use? · none
√ Package-based monorepo, integrated monorepo, or standalone project? · integrated
√ Set up CI with caching, distribution and test deflaking · skip
√ Would you like remote caching to make your build faster? · skip

 NX   Creating your v19.4.1 workspace.

✔ Installing dependencies with pnpm
✔ Successfully created the workspace: test.

> cd ./test && pnpx nx add @nx/nest && pnpx nx g @nx/nest:app apps/api

✔ Installing @nx/nest@19.4.1...
✔ Initializing @nx/nest...

 NX   Package @nx/nest added successfully.

 NX  Generating @nx/nest:application

Fetching ... // skip for brevity

dependencies:
+ @nestjs/common 10.3.10
+ @nestjs/core 10.3.10
+ @nestjs/platform-express 10.3.10
+ axios 1.7.2
+ reflect-metadata 0.1.14 (0.2.2 is available)
+ rxjs 7.8.1
+ tslib 2.6.3

devDependencies:
+ @nestjs/testing 10.3.10
+ @nx/eslint 19.4.1
+ @nx/eslint-plugin 19.4.1
+ @nx/jest 19.4.1
+ @nx/node 19.4.1
+ @nx/web 19.4.1
+ @nx/webpack 19.4.1
+ @swc-node/register 1.9.2 (1.10.2 is available)
+ @swc/core 1.5.29 (1.6.13 is available)
+ @swc/helpers 0.5.11
+ @types/jest 29.5.12
+ @types/node 18.16.20 (20.14.10 is available)
+ @typescript-eslint/eslint-plugin 7.15.0
+ @typescript-eslint/parser 7.15.0
+ eslint 8.57.0 (9.6.0 is available)
+ eslint-config-prettier 9.1.0
+ jest 29.7.0
+ jest-environment-node 29.7.0
+ prettier 2.8.8 (3.3.2 is available)
+ ts-jest 29.1.5
+ ts-node 10.9.1 (10.9.2 is available)
+ typescript 5.4.5 (5.5.3 is available)
+ webpack-cli 5.1.4

Done in 10.8s

 NX   👀 View Details of api-e2e

Run "nx show project api-e2e --web" to view details about this project.

 NX   👀 View Details of api

Run "nx show project api --web" to view details about this project.

Next, I create the file .vscode/launch.json with this content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "api",
      "request": "attach",
      "cwd": "${workspaceFolder}/apps/api",
      "type": "node",
      "outputCapture": "console",
      "port": 9229,
    }
  ]
}

And change the file apps/api/project.json like this:

{
  "name": "api",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/api/src",
  "projectType": "application",
  "tags": [],
  "targets": {
    "serve": {
      "executor": "@nx/js:node",
      "defaultConfiguration": "development",
      "inspect": true,
      "port": 9229,
      "options": {
        "buildTarget": "api:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "api:build:development"
        },
        "production": {
          "buildTarget": "api:build:production"
        }
      }
    }
  }
}

Next, run the command pnpx nx serve api --watch adding a breakpoint on apps/api/src/app/app.controller.ts#:

Start debug with F5 and open the navigator in http://localhost:3000/api the breakpoint doesn't stops in code.

Expected Behavior

It was expected that the code would pause at the breakpoint, as with any nestjs project OUTSIDE of nx

GitHub Repo

https://github.com/leandroluk/-nx-nest_debugging_bug_report

Steps to Reproduce

1. create a nx workspace:

   > pnpx create-nx-workspace@latest test && cd ./test && pnpx nx add @nx/nest && pnpx nx g @nx/nest:app apps/api

2. create the file .vscode/launch.json with this content

   {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "api",
        "request": "attach",
        "cwd": "${workspaceFolder}/apps/api",
        "type": "node",
        "outputCapture": "console",
        "port": 9229,
      }
    ]
   }

3. change the apps/api/project.json adding the properties targets.serve.inspect and targets.serve.port like this:

   {
    // ...
    "targets": {
      "serve": {
        "inspect": true,
        "port": 9229
      }
    }
   }

4. start server with command pnpx nx serve api --watch and add breakpoint in file apps/api/src/app/app.controller.ts on return of method getData()

5. attach process on VSCode using F5 and open the api url (http://localhost:3000/api) and try to debug the request.

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.14.0
OS     : win32-x64
pnpm   : 9.4.0

nx (global)        : 19.3.2
nx                 : 19.4.1
@nx/js             : 19.4.1
@nx/jest           : 19.4.1
@nx/eslint         : 19.4.1
@nx/workspace      : 19.4.1
@nx/eslint-plugin  : 19.4.1
@nx/nest           : 19.4.1
@nx/node           : 19.4.1
@nrwl/tao          : 19.3.2
@nx/web            : 19.4.1
@nx/webpack        : 19.4.1
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/webpack/plugin
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------

Failure Logs

No response

Package Manager Version

pnpm 9.4.0

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[getlarge]

@leandroluk You might want to check this reply in a very similar issue. Essentially, you need your build to produce source maps.