Unbound breakpoints when using nx-console with nest project

[Gorthog]

Current Behavior

When debugging I get unbound breakpoint and cannot debug

Expected Behavior

Breakpoint is bound and i can debug the app

Steps to Reproduce

I created a project using:

npx create-nx-workspace@latest debugging --name debugging --preset nest --appName app --docker true --nxCloud skip

Added a breakpoint in file app.service.ts in line 6
Then served the newly created app using nx-console in vscode:

However, breakpoint is unbound and cannot be hit:

repro: https://github.com/Gorthog/nx-debugging

Environment

Node : 18.16.0
OS : darwin-arm64
npm : 9.5.1

nx (global) : 18.0.6
nx : 18.0.6
@nx/js : 18.0.6
@nx/jest : 18.0.6
@nx/linter : 18.0.6
@nx/eslint : 18.0.6
@nx/workspace : 18.0.6
@nx/devkit : 18.0.6
@nx/eslint-plugin : 18.0.6
@nx/nest : 18.0.6
@nx/node : 18.0.6
@nrwl/tao : 18.0.6
@nx/web : 18.0.6
@nx/webpack : 18.0.6
typescript : 5.3.3

• Nx Console version: v18.17.0
• VSCode version: 1.86.2

[MaxKless]

It looks like the console is correctly launched with a debugger attached. Can you provide some more context why you think this is an issue with Nx Console vs a misconfiguration in your bundler?

[Gorthog]

I just used nx to create this project:

npx create-nx-workspace@latest debugging --name debugging --preset nest --appName app --docker true --nxCloud skip

not using any bundler of my choosing - only what nx uses.

How should I check if this is a problem with nx-console vs something else?
It's either nx-console, or nx generator...

[MaxKless]

Did you go through the VSCode troubleshooting steps for unbound breakpoints?
What executor are you using to build your nest app?
Did you set the source map option on your executor?
Did you check whether a sourcemap file was actually generated in the dist folder?

[Gorthog]

Ok, i see no source maps are being generated in dist folder.
However, I'm just using default project generated by Nx. can you please point me where should I open an issue for this?

[Gorthog]

I fixed the issue with the sourcemaps (added explicitly sourcemap: true in webpack.config.js), but still it won't work.

any suggestions?

[MaxKless]

I don't think this is something we should generate by default either way. Source maps potentially take up lots of space so by generating them by default we would increase bundle sizes for everyone. I think keeping them opt-in is smarter.
Closing this issue for now :)

[Gorthog]

I expected debugging to work out of the box, it doesn't, however it can be fixed by changing webpack.config.js to generate source maps that contain relative links. This way auto attach works automatically, and there is no need to generate launch.json file in vscode:

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

const outDir = path.join(__dirname, '../../dist/apps/app');

module.exports = {
  output: {
      devtoolModuleFilenameTemplate(info) {
        const { absoluteResourcePath, namespace, resourcePath } = info;

        if (path.isAbsolute(absoluteResourcePath)) {
          return path.relative(outDir, absoluteResourcePath);
        }

        // Mimic Webpack's default behavior:
        return `webpack://${namespace}/${resourcePath}`;
      },
      path: outDir,
    },
  plugins: [
    new NxWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      optimization: false,
      outputHashing: 'none',
      sourceMap: true
    }),
  ],
};

[marc-wilson]

I do not recall what I upgraded from, but breakpoints in nx-console were working perfectly fine. Generate a new project and run. Exactly what I would expect.

After upgrading, they don't work out of the box. I spent a very large amount of time troubleshooting this and after running into this comment, things work.

The only reason why I use nx-console is to get my nx projects up and running with a simple click. I do not understand why someone decided that debugging shouldn't work out of the box. That is a basic fundamental need when writing code.

I don't think this is something we should generate by default either way. Source maps potentially take up lots of space so by generating them by default we would increase bundle sizes for everyone. I think keeping them opt-in is smarter. Closing this issue for now :)

So it's better to opt people out of basic debugging rights by default? The nx.json/project.json has the ability to know which environment/configurations it's targeting. Pretty simple rule --- if config is dev, sourcemaps = true, else sourcemaps = false. That's how other things work.

Debugging should work out of the box when running in your IDE. Period.