nx: @nrwl/nest VSCode breakpoints no longer working

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

Bump this is a critical issue

Still a issue

经过楼上大佬的讨论 目前 仅仅修改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/*"
      }
    }
  ]
}

Continues to fail in 16.3.2.

Bump, still an issue in Nx 17.0.3

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?

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.

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

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

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

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

thanks for the workaround. still an issue in 16.1.4

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.

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
    }),
  ],
};

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

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());

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

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

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

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");

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?

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

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.

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

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

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

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

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

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.

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

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…

Bump

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

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

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

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