@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. 🎐