@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: https://github.com/nestjs/swagger/issues/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.

[shahin-et]

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.

Thanks to this link, after adding this configuration I'm able to use debugger:

"configurations": [
        {
            "name": "Attach to node",
            "type": "node",
            "request": "attach",
            "restart": true,
            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${webRoot}/node_modules/*",  // a default
                "webpack:///./*":   "${webRoot}/js-src/*",        // unsure how/why webpack generates ./links.js
                "webpack:///../*": "${webRoot}/js-src/*",         // unsure how/why webpack generates ../links.js
                "webpack:///*":     "*"                           // a default, catch everything else
            }
        }
 ]

[dfenerski]

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",
        ...
      },
   },

Just to add some clarity, the 2 props should be in options of build as per the docs. This & the workaround snippet did the job for me.

"targets": {
    "build": {
        ... 
        "options": {
            ...
            "isolatedConfig": true,
            "webpackConfig": "path/to/webpack.config.js",
            ...
        }
        ... 
    }
}

[threes-was-taken]

Bump, still an issue in Nx 17.0.3

[henrysachs]

I'm taking suggestions but writing my own webpack config seems counterintuitive

[ZenSoftware]

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
})

After upgrading from Nx 17.1.3 to v17.2.X this workaround no longer works for me. I'm curious if anyone has come up with a workaround that works for Nx v17.2?

[tagplus5]

After upgrading from Nx 17.1.3 to v17.2.X config.devtool setted to false by default.

Config with working breakpoints:

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

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

  config.devtool = 'source-map';

  return config;
});

[ZenSoftware]

Adding config.devtool = 'source-map'; to the bottom of the config got my breakpoints working again. Thank you. It is very kind of you to have provided a working solution. 🎐

[francobasilico]

For version v17.2.7.

With the following config, still doesn't work. AM I missing somethings?

"isolatedConfig": true,
"webpackConfig": "apps/api/webpack.config.js"

and

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

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

  config.devtool = 'source-map';

  return config;
});

{
      "name": "Attach to Server",
      "port": 9229,
      "restart": true,
      "request": "attach",
      "type": "node"
    }

[janeklb]

Here's an nx 17.2.7 compatible typescript composable plugin for this (i take no credit for the actual solution -- thanks for everyone else above for coming up with it!):

// webpack.config.ts
import { NxComposableWebpackPlugin, composePlugins, withNx } from '@nx/webpack';
import path from 'node:path';
import merge from 'webpack-merge';

const withFixedSourceMapPaths: () => NxComposableWebpackPlugin = () => (config, ctx) =>
  merge(config, {
    output: {
      devtoolModuleFilenameTemplate: (info: { absoluteResourcePath: string }) => {
        const rel = path.relative(ctx.context.cwd, info.absoluteResourcePath);
        return `webpack:///./${rel}`;
      },
    },
    devtool: 'source-map',
  });

export default composePlugins(withNx(), withFixedSourceMapPaths());

[tagplus5]

@francobasilico debugger works with version v17.2.8 using config like you have

[francobasilico]

@francobasilico debugger works with version v17.2.8 using config like you have

Fixed

[catalint]

Here is what worked for us , Nx 17.2.6 , thanks to everyone above 🎉

// // 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',
    })
  },
)

[zackarydev]

Has anyone tried to use port: 0 in the serve target of a project.json?

[cantecim]

Thanks for posting the solutions here, it's still an issue with 17.2.8. This is what worked for me, instead of using cwd I've used root path this change also makes it work if the current working directory is somewhere under the project itself

you can also try that commented-out webpack-merge approach

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',
    sourceMap: true,
  }),
  (config, ctx) => {
    // Update the webpack config as needed here.
    // e.g. `config.plugins.push(new MyPlugin())`
    config.output.devtoolModuleFilenameTemplate = function (info) {
      const rel = path.relative(ctx.context.root, info.absoluteResourcePath);
      return `webpack:///./${rel}`;
    };
    return config;

    // return merge(config, {
    //   output: {
    //     devtoolModuleFilenameTemplate: (info) => {
    //       const rel = path.relative(ctx.context.root, info.absoluteResourcePath)
    //       return `webpack:///./${rel}`
    //     },
    //   },
    //   devtool: 'source-map',
    // })
  }
);

[benjaminhera]

For nx@17.2.8 this launch.json and webpack.config.js configuration did the trick for me:

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

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

// Nx plugins for webpack.
module.exports = composePlugins(
  withNx({
    target: 'node',
  }),
  (config) => {
    // Update the webpack config as needed here.
    // e.g. `config.plugins.push(new MyPlugin())`
    config.devtool = 'source-map'

    return config
  },
)

[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: https://github.com/nrwl/nx/issues/14708#issuecomment-1883177763

[nadiagoralski]

the following config worked for me on nx@17.2.8

launch.json from https://github.com/nrwl/nx/issues/14708#issuecomment-1905783979

{
    "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 https://github.com/nrwl/nx/issues/14708#issuecomment-1883177763

// // 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

https://github.com/nrwl/nx/issues/14708#issuecomment-1916808153

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 nx@18.0.8. 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.