@nrwl/nest VSCode breakpoints no longer working

[ZenSoftware]

Current Behavior

I am getting unbound breakpoints in VSCode when trying to debug Nest with a fresh npx create-nx-workspace@latest. This just suddenly started occurring over the past 3 days with no real cause that I can narrow it down to.

Though creating a Nest app using @nestjs/cli with npx @nestjs/cli@latest new and serving with nest start --debug with the same launch.json seems to work. It seems to be something specific to Nx.

Expected Behavior

Breakpoints should work

GitHub Repo

No response

Steps to Reproduce

1. Created a fresh Nest integrated monorepo using npx create-nx-workspace@latest
2. Launch VSCode with all extensions disabled via code . --disable-extensions
3. Add the following .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "nest",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true
    }
  ]
}

4. Set a breakpoint, nx serve api and start VSCode debugger

Nx Report

Node : 18.13.0
OS   : win32 x64
npm  : 8.19.3

nx : 15.6.3
@nrwl/angular : Not Found
@nrwl/cypress : Not Found
@nrwl/detox : Not Found
@nrwl/devkit : 15.6.3
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.6.3
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.6.3
@nrwl/js : 15.6.3
@nrwl/linter : 15.6.3
@nrwl/nest : 15.6.3
@nrwl/next : Not Found
@nrwl/node : 15.6.3
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/rollup : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : Not Found
@nrwl/web : Not Found
@nrwl/webpack : 15.6.3
@nrwl/workspace : 15.6.3
@nrwl/vite : Not Found
typescript : 4.8.4
---------------------------------------
Local workspace plugins:
---------------------------------------
Community plugins:

Failure Logs

No response

Additional Information

No response

[Micha-Richter]

Same problem here after migrating a workspace from 15.4.5 to 15.6.3.

[ZenSoftware]

After reverting to Nx v15.6.2 from v15.6.3, breakpoints are working again. Something changed between 15.6.2 to 15.6.3 that breaks debugging with VSCode.

[samuelsweet]

Reverting to 15.6.2 from 15.6.3 solved for me. The issue is that the paths in webpack are incorrect in 15.6.3

15.6.3 produces:

const nest_module_1 = __webpack_require__("../../libs/nest-module/src/index.ts");

15.6.2

const nest_module_1 = __webpack_require__("./libs/nest-module/src/index.ts");

[jaypea]

just tested this with 15.7.2 and the issue still persists.

[arabull]

I am seeing this too with a NestJS application. But I'm not actually sure it's NestJS-specific. I can also replicate it with the following application:

import express from 'express';

const host = process.env.HOST ?? 'localhost';
const port = process.env.PORT ? Number(process.env.PORT) : 3000;

const app = express();

app.get('/', (req, res) => {
  res.send({ message: 'Hello API' });
});

app.listen(port, host, () => {
  console.log(`[ ready ] http://${host}:${port}`);
});

I can hit breakpoints when built/served with @nrwl/node 15.6.2 but not with 15.6.3. I can leave all other Nx package on 15.6.3 or higher.

This also means I need to keep using the @nrwl/node:webpack executor. Moving to the @nrwl/webpack:webpack doesn't work, regardless of the @nrwl/node package version, which makes sense.

[arabull]

@Dzixxx's workaround didn't work for our projects. I added it to my "serve" target and tried with both the @nrwl/node and @nrwl/webpack build executors for my "build" target.

I also tried adding "sourceMap": true directly within the build.options, but that didn't work either.

[rudfoss]

Problem seems to still persist in 15.8.1. I'm able to construct a launch.json configuration that starts main.ts directly with debugging, but that won't include webpacks magic. sourceMap suggestions don't work either.

[gdraganic]

Problem still persists in the latest (15.8.5) version.

It seems that sources array in a generated source map have wrong relative path.

As a workaround, the following webpack.config.js fixes the issue and outputs correct source map same as before it was broken:

const { composePlugins, withNx } = require('@nrwl/webpack')
const path = require('path')

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath)
    return `webpack:///./${rel}`
  }
  return config
})

[slaby93]

Still a issue

[Cpt-Falcon]

Bump this is a critical issue

[Cpt-Falcon]

Bump

[pmosconi]

#15918

[pmosconi]

Problem still persists in the latest (15.8.5) version.

It seems that sources array in a generated source map have wrong relative path.

As a workaround, the following webpack.config.js fixes the issue and outputs correct source map same as before it was broken:

const { composePlugins, withNx } = require('@nrwl/webpack')
const path = require('path')

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath)
    return `webpack:///./${rel}`
  }
  return config
})

This worked for me. I also had to change project.json configuration adding these 2 lines that might not be present in case of upgrade from an older version:

"targets": {
    "build": {
        ...
        "isolatedConfig": true,
        "webpackConfig": "apps/api/webpack.config.js",
        ...
      },
   },

[eliellis]

Problem still persists in the latest (15.8.5) version.

It seems that sources array in a generated source map have wrong relative path.

As a workaround, the following webpack.config.js fixes the issue and outputs correct source map same as before it was broken:

const { composePlugins, withNx } = require('@nrwl/webpack')
const path = require('path')

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath)
    return `webpack:///./${rel}`
  }
  return config
})

Thank you @gdraganic. With your workaround and the information in @pmosconi's comment, I was able to get this resolved in our workspace on Nx 15.9.2. We're in the middle of migrating from 14 to 15 right now and this bit us (just now realizing 16 came out a few hours ago 😭). Usually during major migrations I will go ahead and generate a "test app" with the newer schematics for each of our application types (Angular, Nest, React, etc.) just to make sure we keep up with any changes to project configurations that migrations may not capture, so thankfully I had already added the webpack.config.js files to our node projects and set everything up to point them in the relevant project.json files.

For greater convenience (we have multiple node apps), I created the below in tools/helpers/patch-nx-source-map-paths.js with the following contents:

const path = require('path');

/*
 * Temporary workaround for debugging Node applications being built with webpack and Nx.
 * See: https://github.com/nrwl/nx/issues/14708#issuecomment-1457996600
 */
module.exports = function patchNxSourceMapPaths(config) {
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath);
    return `webpack:///./${rel}`;
  };
  return config;
};

And modified all of our webpack.config.js files like so:

const { composePlugins, withNx } = require('@nrwl/webpack');

const patchNxSourceMapPaths = require('../../tools/helpers/patch-nx-source-map-paths');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  patchNxSourceMapPaths(config);
  return config;
});

Hopefully this gets addressed soon.

[ndrsg]

thanks for the workaround. still an issue in 16.1.4

[pmosconi]

I tried upgrading from 15.9.2 to 16.2.2 and debugger is not even starting. VSCode output window says:
[error] [Extension Host] Error: Could not connect to debug target at http://localhost:9229: Could not find any debuggable target
I tried a few tweaks on project.json and launch.json but no luck...

[drackp2m]

Continues to fail in 16.3.2.

[adamwdennis]

Still an issue in 16.4.0-beta.5 cc @FrozenPandaz

[toosui]

经过楼上大佬的讨论 目前 仅仅修改vscode的launch.json即可运行debug，但是这仅针对于vscode调试 其他code编辑器未试

nx版本：16.3.x

    "@nx/cypress": "^16.3.2",
    "@nx/detox": "16.3.0",
    "@nx/eslint-plugin": "16.3.0",
    "@nx/jest": "16.3.2",
    "@nx/js": "16.3.2",
    "@nx/linter": "16.3.0",
    "@nx/nest": "^16.3.2",
    "@nx/node": "16.3.2",
    "@nx/react": "^16.3.2",
    "@nx/react-native": "16.3.0",
    "@nx/vite": "^16.3.2",
    "@nx/webpack": "16.3.2",
    "@nx/workspace": "16.3.0",

vscode：launch.json配置

其中backend可以替换成nx工作区内各自项目名称

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "nest",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/apps/backend/*"
      }
    }
  ]
}

[erikash]

Hi guys,
The debugger didn't break on breakpoints I set (only with debugger;) and I've figured our the root cause for me - might help others as well:
nestjs/swagger#2496

[Tom910]

Also this doesn't work not only with nest, but also with plain TS express application with executor @nx/webpack:webpack. NX 16.5.2

[shahin-et]

Any solution? The VSCode debugger doesn't work with 16.6.0 too.

[BurningEnlightenment]

You will either need to patch the webpack config with a custom devtoolModuleFilenameTemplate like shown in the answers above (I went this route) or configure the sourceMapPathOverrides in VSCode launch.json.

[kkuriata]

Provided solution does not work when using dotenv with nx serve (Nx 17.2.8).

However, it is a workaround for this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run and debug NestJS",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/nx",
      "args": ["serve", "backend", "--configuration=development"],
      "cwd": "${workspaceFolder}",
      "envFile": "${workspaceFolder}/.env",
      "env": {
        "NODE_OPTIONS": "--max-http-header-size=100000",
        "TS_NODE_IGNORE": "false",
        "TS_NODE_PROJECT": "${workspaceFolder}/apps/backend/tsconfig.json"
      },
      "console": "integratedTerminal"
    }
  ]
}

Of course I have also added following code to my webpack.config: #14708 (comment)

[nadiagoralski]

the following config worked for me on [email protected]

launch.json from #14708 (comment)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to NestJS",
            "request": "attach",
            "cwd": "${workspaceFolder}/apps/<my-nest-project>",
            "type": "node",
            "port": 9229
        }
    ]
}

webpack.config.js from #14708 (comment)

// // webpack.config.js
const { composePlugins, withNx } = require('@nx/webpack')
const path = require('path')
const { merge } = require('webpack-merge')
// Nx plugins for webpack.
module.exports = composePlugins(
  withNx({
    target: 'node',
  }),
  (config, ctx) => {
    // Update the webpack config as needed here.
    // e.g. `config.plugins.push(new MyPlugin())`
    return merge(config, {
      output: {
        devtoolModuleFilenameTemplate: (info) => {
          const rel = path.relative(ctx.context.cwd, info.absoluteResourcePath)
          return `webpack:///./${rel}`
        },
      },
      devtool: 'source-map',
    })
  },
)

[NathanPB]

In my case it was much simpler. I am forcing the usage of the tsc compiler, but even specifying "sourceMap": true in tsconfig.base.json (and not overriding it), the sourcemaps weren't being generated.

I just added "sourceMap": true to my build target, looking like this:

{
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/web-api",
        "main": "apps/web-api/src/main.ts",
        "tsConfig": "apps/web-api/tsconfig.app.json",
        "assets": ["apps/web-api/src/assets"],
        "webpackConfig": "apps/web-api/webpack.config.js",
        "target": "node",
        "compiler": "tsc",
        "sourceMap": true
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true,
          "inspect": false,
          "fileReplacements": [
            {
              "replace": "apps/web-api/src/environments/environment.ts",
              "with": "apps/web-api/src/environments/environment.prod.ts"
            }
          ]
        }
      }
    }
  }
}

Issue gone!

I am running Node 20.11.0 and Nx 17.2

By the way, it even works on IntelliJ IDEA and WebStorm debugger, that is what I actually use

[nir-bar-zvi]

for the love of god its been months why are we still doing a workaround for a basic necessary feature can this be resolved already?

[zackarydev]

And also fix multi-application debugging. The first app that gets built is the only one that can be debugged.

[hejkerooo]

The same happens for node 18.19 and nx 18.0.4

#14708 (comment)

This solution still works

[sasha-flow]

nx 18.0.7 and node 20.11.1
Still no vscode breakpoints out of the box. This is crucial.

[zouhair94]

For the last version this config worked for me

const { join } = require('path');

module.exports = {
  output: {
    path: join(__dirname, '../../dist/apps/orders'),
  },
  plugins: [
    new NxWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      optimization: false,
      outputHashing: 'none',
      sourceMap: true
    }),
  ],
};

[sasos90]

All this works, but after adding "build" target, the file watcher doesn't restart the server anymore. How do I fix that?
I am using [email protected].
I somehow realized, that if you use Monorepo integrated project structure, it does not work, while for Standalone project, it works. What is the issue here?

[MilanKovacic]

If anyone is still searching for the solution, in the webpack configuration file of your NestJS application, enable source map generation:

const { NxWebpackPlugin } = require('@nx/webpack');
const { join } = require('path');

module.exports = {
  output: {
    path: join(__dirname, '../../dist/projects/backend'),
  },
  plugins: [
    new NxWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      optimization: false,
      outputHashing: 'none',
      sourceMap: true, // <-- Add this
    }),
  ],
};

Create a .vscode folder in the root of the repository. Create a file "launch.json", with the following contents:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Server",
      "port": 9229,
      "restart": true,
      "request": "attach",
      "type": "node",
      "cwd": "${workspaceFolder}/projects/backend"
    }
  ]
}

Adjust the working directory as needed.
Now you can simply run the NestJS application (serve development), and attach the debugger:

[rudfoss]

I was trying to get this working using the auto-attach feature of VSCode so that I could use the serve target as normal, but I was not able to get it working on v18.2.3 using this approach directly.

Checking the sourcemap it seems the problem with mapped file paths is not resolved so I combined @MilanKovacic suggestion with the answer from @nadiagoralski here and it now works.

Below is my complete webpack.config.js, toggling auto attach to "with flag" works.

const path = require("node:path")

const { NxWebpackPlugin } = require("@nx/webpack")

/**
In the v17 version of the fix a context-variable with the root path was available.
It may be possible to get that value some other way, but for now this works
**/
const workspaceRoot = path.join(__dirname, "../..")

module.exports = {
  output: {
    path: path.join(__dirname, "../../dist/warehouse/api"),
    devtoolModuleFilenameTemplate: (info) => { // ref: https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate
      const rel = path.relative(workspaceRoot, info.absoluteResourcePath)
      return `webpack:///./${rel}`
    }
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        type: "asset/source"
      }
    ]
  },
  plugins: [
    new NxWebpackPlugin({
      target: "node",
      compiler: "tsc",
      main: "./src/main.ts",
      tsConfig: "./tsconfig.app.json",
      assets: ["./src/assets"],
      optimization: false,
      generatePackageJson: true,
      outputHashing: "none",
      sourceMap: true // Added source map to output (will not work without this)
    })
  ]
}

[MilanKovacic]

@rudfoss

Did you set the "cwd" (current working directory) in your launch.json file?
The difference between those two approach (with, and without devtoolModuleFilenameTemplate customization) is that by default, source map file will output the relative path (from the originating folder) pointing to the original files, for example:

"sources": ["webpack:///./src/app/app.controller.ts"]

This is the reason why working directory must be set to the originating folder.
On the other hand, the customized approach is more robust, in a sense that mapping would look like this:

"sources": ["webpack:///./projects/backend/src/app/app.controller.ts"]

Reason why all of this doesn't work in nx out of the box is this:

config.devtool =
    options.sourceMap === 'hidden'
      ? 'hidden-source-map'
      : options.sourceMap
      ? 'source-map'
      : false;`

Ideally, nx webpack plugin would use a fast source map strategy such as "eval-source-map" in development, and "source-map" in production.

[rudfoss]

@MilanKovacic Thanks for the detailed explanation.

I was trying to get it working using the "auto attach" feature so that all you needed to do to get debugging running was to use a pre-defined task that basically ran nx serve for that project. In my current workspace I don't have a launch.json file and was trying to avoid having to create one.

I'm generally not a big fan of having to start the app then attach the debugger as a separate manual step as you may not be able to break on the very first line of code. I'm sure that starting and attaching can be done using a single launch.json configuration, but it seemed even easier if I could simply auto-attach and then use the nx serve target as normal.

[MilanKovacic]

I've accidentally skipped over the "auto" part of the attach, so I was confused why the solution was not working.
Hopefully, the fix lands soon so that both approaches work without customizations.

[MilanKovacic]

Hi @ndcunningham, is there any progress on implementing this so that debugging works out of the box?
In the comment above (#14708 (comment)) I detailed the problems and the potential fix.

[minikdev]

bump.
the debugger is not working without the solution @MilanKovacic (thanks) provided. my "nx" version is 19.0.6

[rlarac]

The debugger is still not working without the workaround/solution provided by @rudfoss in Nx 19.5.7.

[gloomweaver]

Nx 19.5.7
Made it work with providing outFiles in launch json

webpack.config.js

const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin')
const { join } = require('path')

module.exports = {
  output: {
    path: join(__dirname, '../../../dist/backend/apps/api'),
  },

  plugins: [
    new NxAppWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      generatePackageJson: true,
      optimization: false,
      sourceMap: true,
      outputHashing: 'none',
    }),
  ],
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug API",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "cwd": "${workspaceFolder}/backend/apps/api",
      "outFiles": ["${workspaceFolder}/dist/**/*.(m|c|)js", "!**/node_modules/**"]
    }
  ]
}

[adamwdennis]

Got it working like so:

.vscode/launch.json:

   {
      "name": "Attach to API (must be running)",
      "type": "node",
      "request": "attach",
      "address": "localhost",
      "port": 9229,
      "restart": true,
      "sourceMaps": true
    }

apps/api/project.json

"targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "target": "node",
        "compiler": "tsc",
        "outputPath": "dist/apps/api",
        "main": "apps/api/src/main.ts",
        "tsConfig": "apps/api/tsconfig.app.json",
        "webpackConfig": "apps/api/webpack.config.js",
        "generatePackageJson": true,
        "sourceMap": true
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true,
          "inspect": false
        },
        "development": {
          "optimization": false
        }
      }
    },
    "serve": {
      "executor": "@nx/js:node",
      "defaultConfiguration": "development",
      "dependsOn": ["build"],
      "options": {
        "buildTarget": "api:build",
        "runBuildTargetDependencies": false,
        "port": 9229
      },
      "configurations": {
        "development": {
          "buildTarget": "api:build:development"
        },
        "production": {
          "buildTarget": "api:build:production"
        }
      }
    },

apps/api/tsconfig.app.json

  {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/apps/api",
    "module": "commonjs",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "target": "es2021",
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true
  },
  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
  "include": ["src/**/*.ts"]
}

apps/api/webpack.config.js

const { composePlugins, withNx } = require('@nx/webpack');
const path = require('path');

module.exports = composePlugins(withNx(), (config) => {
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath);
    return `webpack:///./${rel}`;
  };
  config.optimization = {
    minimize: false,
  };
  return config;
});

package.json

   "scripts": {
      "serve:api": "NODE_OPTIONS='inspect' NODE_ENV=development ENVIRONMENT=local yarn nx run api:serve:development",
      ...
      }

[treefitty]

There is a piece of wall next to me with a nice size "my head" imprinted on it.... no matter what combination of the sorcery mentioned so far has worked despite from all accounts everything looking like it should be working 🥺

Both unit tests and app serving fail to connect, however when serving the app it does seem as though the Nx Node processes are connecting..... so it's close (at least it's doing something!)

My stack is vscode, [email protected], [email protected], [email protected], [email protected] & nx/[email protected]

[Playjasb2]

This solution worked for me.

I am using VS Code, with [email protected], [email protected], node v22, and @nx/[email protected].

[sudharsan-gandhi]

solution:

Project.json

set the project.json build option to run in development. By default, --node-env is always in production.
source code:
add build configuration for development to override node-env

screenshot:

pasted below to copy-paste:

    "build": {
      "configurations": {
        "development": {
          "args": ["--node-env=development"]
        }
      }
    }

web.config.js

change webpack.config.js to set sourcemap to true if not production build.

screenshot:

pasted below to copy-paste:

const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join } = require('path');

module.exports = (env, argv) => {
  console.log("env", env);
  console.log("argv", argv);
  return {
    output: {
      path: join(__dirname, '../../dist/app-dir'),
    },
    plugins: [
      new NxAppWebpackPlugin({
        target: 'node',
        compiler: 'tsc',
        main: './src/main.ts',
        tsConfig: './tsconfig.app.json',
        assets: ['./src/assets'],
        optimization: false,
        outputHashing: 'none',
        generatePackageJson: true,
        sourceMap: process.env['NODE_ENV'] !== 'production',
        verbose: process.env['NODE_ENV'] !== 'production'
      }),
    ],
  }
};

launch.json

finally add launch.json configuration just basic configuration is sufficient.

screenshot:

pasted below to copy-paste:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": " base - Server",
      // "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "pnpm",
      "runtimeArgs": [
        "nx",
        "run",
        "app-name:serve:development"
      ],
      "outputCapture": "std",
      "internalConsoleOptions": "openOnSessionStart",
      "autoAttachChildProcesses": true,
      "console": "internalConsole",
      "cwd": "${workspaceFolder}/ogon/api/"
    },
  ]
}

Note: please change the app name and pnpm to the required package manager. Also, append "development" to "app-name:serve" since "app-name:serve" is a production build and sourceMap will be false.

[EthanSK]

still an issue...I 'm on latest nx (20.2.1) and its happening. I can get around with the cwd workaround mentioned above, but only if i set auto attach with flags...which I don't want.

[nbergqui]

I tried everything in this thread with the various launch.json settings, webpack.config.js changes, and tsconfig.json options. Got close, but nothing worked. [email protected], [email protected], [email protected]

My ultimate fix boiled down to two changes in project.json.

• Under build -> configurations -> development, I added "sourceMap": true
• Under serve -> options, I added :development to buildTarget

project.json

{
  "name": "api",
  ...
  "targets": {
    "build": {
    ...
      "configurations": {
          "development": {
            "sourceMap": true
          },
          "production": {}
  },
  "serve": {
      "executor": "@nx/js:node",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "api:build:development"
      },
      "configurations": {
        "development": {
          "buildTarget": "api:build:development"
        },
        "production": {
          "buildTarget": "api:build:production"
        }
      }
    },
    ...

launch.json (for reference)

        {
            "name": "api",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npx",
            "runtimeArgs": ["nx", "serve", "api"],
            "outputCapture": "std",
            "internalConsoleOptions": "openOnSessionStart",
            "console": "internalConsole",
            "env": {
                "NODE_ENV": "local" // used to load my .env.local config file
            },
            "cwd": "${workspaceRoot}/apps/api" // required for breakpoints to bind
        },

webpack.config.js (for reference)

const { composePlugins, withNx } = require('@nx/webpack');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
    // Update the webpack config as needed here.
    // e.g. `config.plugins.push(new MyPlugin())`
    return config;
});

[StiliyanKushev]

None of the solutions really work. And even if they did, I find it extremely ugly to have to deal with launch.json file in any way shape or form. This used to work out of the box. Now it does not. It's obviously a bug, and needs to be treated like one.

[sasos90]

I agree 100%, it is interesting how long i follow this topic already, and it still hasn't been fixed. Although I hear about NRWL
NX recommendations to use it, all the time.

[StiliyanKushev]

Just FYI, to make @gdraganic's solution work for monorepo with multiple apps/projects you would do:

const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
const { join, relative } = require('path');

const workspaceRoot = join(__dirname, '../../');

module.exports = {
	output: {
		path: join(__dirname, '../../dist/apps/api-gateway'),
		devtoolModuleFilenameTemplate(info) {
			const rel = relative(workspaceRoot, info.absoluteResourcePath);
			return `webpack:///./${rel}`;
		},
	},
	plugins: [
		new NxAppWebpackPlugin({
			target: 'node',
			compiler: 'tsc',
			main: './src/main.ts',
			tsConfig: './tsconfig.app.json',
			assets: ['./src/assets'],
			optimization: false,
			outputHashing: 'none',
			generatePackageJson: true,
		}),
	],
};

EDIT: This works without having to write launch.json and works well with the default auto-attach option.

"debug.javascript.autoAttachFilter": "onlyWithFlag",

It's still a bit hacky but it gets the job done for now. Would love to see this fixed on NX's side though!