Breakpoints still don't work in nx 15.8.9

[Cpt-Falcon]

!!IMPORTANT EDIT!!

Good news, here is the workaround to get things to work:

yarn nx serve my-app --host=127.0.0.1

The key is to set the host to 127.0.0.1. Localhost will not work for some reason. Why? Don't know. Then in your launch.json make sure to set the uri to 127.0.0.1 instead of localhost.

Edit: Example repo of breakpoint failure on fresh project using create workspace:

https://github.com/Cpt-Falcon/NxBreakpointFailure

Current Behavior

Breakpoints don't bind and therefore are not hit. Breakpoints do get hit if you go into the browser inspector and set a breakpoint there, but not through vs code code. Here's vs code running in debug, and you can see on the sidebar that the breakpoints are not bound.

See this other issue which was supposedly resolved with a recent pr:

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

I have tried a variety of things as well:

Launch config web root

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:9004",
      "webRoot": "${workspaceFolder}/apps/my-project",
      "skipFiles": ["$**/node_modules/**"]
    }
  ]
}

Project.json source map on/off, vendor chunk on/off combination

        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },

webpack config json hack, doesn't work for me:

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

Also The browser takes forever to startup too when a breakpoint is set.

Expected Behavior

Breakpoints should bind.

GitHub Repo

https://github.com/Cpt-Falcon/NxBreakpointFailure

Steps to Reproduce

1. Create an nx app with module federation in version 15.8.9
2. create a launch.json config to start debugging in vscode
3. Launch in debug

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.15.0
   OS   : win32 x64
   yarn : 3.5.0

   nx                      : 15.8.9
   @nrwl/js                : 15.8.9
   @nrwl/jest              : 15.8.9
   @nrwl/linter            : 15.8.9
   @nrwl/workspace         : 15.8.9
   @nrwl/cli               : 15.8.9
   @nrwl/cypress           : 15.8.9
   @nrwl/devkit            : 15.8.9
   @nrwl/eslint-plugin-nx  : 15.8.9
   @nrwl/react             : 15.8.9
   @nrwl/rollup            : 15.8.9
   @nrwl/tao               : 15.8.9
   @nrwl/web               : 15.8.9
   @nrwl/webpack           : 15.8.9
   typescript              : 5.0.2

Failure Logs

No response

Additional Information

No response

[Cpt-Falcon]

Good news, here is the workaround to get things to work:

yarn nx serve my-app --host=127.0.0.1

The key is to set the host to 127.0.0.1. Localhost will not work for some reason. Why? Don't know. Then in your launch.json make sure to set the uri to 127.0.0.1 instead of localhost.

[Cpt-Falcon]

Bump

[pmosconi]

Unfortunately this is not working for me on 15.9.2 when I am trying to debug a nest application. The issue seems to be related to the path where source files are vs. where they run from:

I have no idea how to adjust the build tool (nx) to correct the path ... Launch configuration is plain and simple:

      {
          "type": "node",
          "request": "attach",
          "name": "Api attach",
          "port":9229,
      }

Grateful for any suggestion!

[Cpt-Falcon]

@pmosconi Did you try changing the host to 127.0.0.1? That worked for me as a workaround, but not sure about next js

[tonivj5]

same issue https://github.com/nrwl/nx/issues/15159

[pmosconi]

@Cpt-Falcon: I tried changing to 127.0.0.1 but no luck. I'm using nest.js (typescript APIs).

[Cpt-Falcon]

@tonivj5 Yes its the same issue but it was claimed to be fixed in more recent versions, which it is not.

[eliellis]

@Cpt-Falcon It appears you're dealing with a separate issue from the NestJS debugging problem. I assume you're trying to debug a frontend application? If so, your workaround is the right solution for getting breakpoints working for your FE application. See here for more details on your problem.

For the separate issue of Nx NestJS users, I can confirm that it appears that VSCode debugging is indeed broken OOTB with Nx 15.x.x.

[zaquas77]

Hi I have the same problem on 16.0.3 version. I suspect the problem is within the path file, in particular with the 'packages' string in the path. If I attach the debug with chrome, vsc's debug open the file, where I've put the my breakpoints, without 'packages'
Es: '~/dev/projectname/src/routes/myfile.ts' While the real file is in ~/dev/projectname/src/packages/routes/myfile.ts'

And, I don't know if is there a correlation, but the nx console have some problem with generate angular component... I always have to add 'packages' string to the start of the property 'path' otherwise nx console complain

I hope this help to fix those problems. thx

[ndrsg]

breakpoints for nest.js also not working with 16.1.4

[dapperdandev]

I got this working on localhost by updating my project.json to include host in the serve options. Thanks to @pmosconi for their comment that put me on the right track.

// launch.json
{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "preLaunchTask": "npm: serve:web",
},

// project.json
{
    "name": "web",
    "targets": {
        "build": {...},
        "serve": {
            "executor": "@angular-devkit/build-angular:dev-server",
            "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": true
            },
            "options": {
                "browserTarget": "web:build",
                "host": "localhost", // added this
                "port": 4200
            },
        },
        ...
}

[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

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.