NX version 17 wont generate source maps for NestJS project

[tuuling]

Current Behavior

When I run nx serve my-project it won't generate a sourcemap for my main.js file. Meaning I can't use a debugger in Typescript.

Expected Behavior

I expect it to create a sourceMap next to my main.js file

GitHub Repo

No response

Steps to Reproduce

1. Create a a fresh nx workspace with a nest preset npx create-nx-workspace my-workspace --preset=nest
2. run it with nx serve appname
3. check dist/apps/appname, main.js does not have a sourcemap included.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 21.4.0
   OS     : darwin-x64
   npm    : 10.2.4
   
   nx (global)        : 17.2.8
   nx                 : 17.3.1
   @nx/js             : 17.3.1
   @nx/jest           : 17.3.1
   @nx/linter         : 17.3.1
   @nx/eslint         : 17.3.1
   @nx/workspace      : 17.3.1
   @nx/devkit         : 17.3.1
   @nx/eslint-plugin  : 17.3.1
   @nx/nest           : 17.3.1
   @nx/node           : 17.3.1
   @nrwl/tao          : 17.3.1
   @nx/web            : 17.3.1
   @nx/webpack        : 17.3.1
   typescript         : 5.3.3

Failure Logs

No response

Package Manager Version

No response

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

Originally I had a repo with NX version 16.2 / the debugging experience was working fine. I used NX migrate to migrate my repo to the latest NX version: 17.3. The debugger stopped working. After a lot of trial and error, I noticed that a sourceMap was not generated for the main.js file any more - hence the debugger could not match my Typescript breakpoints with the main.js file.

I thought that maybe my repo was messed up and generated a brand new one with the nx generate workspace command. That one had the same issue OOTB.

[tuuling]

So I started with npx [email protected] my-workspace --preset=nest and started migrating one patch version at a time. It worked in 17.1.3 but was broken in 17.2.1 I then only changed @nx/webpack to 17.1.3 and it started generating sourceMaps again.

I can only assume it's this commit: https://github.com/nrwl/nx/pull/20678/commits/1a63d151deea55e68b75bc0bc6bb17e92ae1e884

But I don't know what's going on there to propose a fix.

[bddy]

We're having the same problem. After migrating from version 17.0.3 to 17.3.1 our nest debuggers didn't work any more.

I can confirm in 17.1.3 source maps get generated as expected. The first version they don't is 17.2.0 so i thought maybe https://github.com/nrwl/nx/pull/20243 introduced this bug (?).

---

Update:

Seems like sourceMap: true has to be set explicitly now in NxWebpackPlugin options.

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

module.exports = {
  output: {
    path: join(__dirname, '../../dist/apps/server'),
  },
  plugins: [
    new NxWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      optimization: false,
      outputHashing: 'none',
      sourceMap: true // <-- needs to be set
    }),
  ],
};

[CramericaIndustries]

Super annoying, wasted 3 hours on this. Here is my solution for NX v18.0.2...

in project.json of my project I have the webpackConfig property set...

{...
  "targets": {
    "build": {
      ...
      "options": {
          "webpackConfig": "apps/tiles-server-nest/webpack.config.js"
      }...
    }...
  }
}

And here is the webpack.config.js file:

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

module.exports = composePlugins(
  // always pass withNx() first
  withNx({
    sourceMap: true
  }),

  (config) => {
    // Further customize webpack config
    return config;
  }
);

[bddy]

sourceMap: true can also be set in the builder options in the project.json build target.

{
  ...
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        ...
        "sourceMap": true // <-- here
      }
    }
  }
}

[CramericaIndustries]

sourceMap: true can also be set in the builder options in the project.json build target.

That's the cleaner solution. That way all the config options are in project.json.

[tuuling]

I can confirm in 17.1.3 source maps get generated as expected. The first version they don't is 17.2.0 so I thought maybe #20243 introduced this bug (?).

Ah, you are probably correct. That is one massive change tho, I went over it and couldn't figure out what could be causing it.

[julianpoemp]

I was facing the same issue. Workaround by @bddy fixed it for me. Thanks!

[Gorthog]

Using nx 18.0.6 i generated the project using

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

and i didn't get any sourcemap generated. According to @bddy suggestion, I added sourceMap: true to webpack.config.js and now indeed i see sourcemaps in dist folder.

However, breakpoints still don't hit. any ideas?

[julianpoemp]

@Gorthog I had the same issue, but with WebStorm IDE. Setting "sourceMap":true in webpack.config.js fixed it for me.

[bddy]

@Gorthog since your source maps did get generated, i think your problem might be something else. Here is my launch.json, maybe that helps:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Debug my-node-app",
      "port": 9229,
      "sourceMaps": true,
      "cwd": "${workspaceRoot}/path/to/my-node-app"
    },
  ]
}

[Gorthog]

Thanks @bddy, you're right that this will enable debugging - the reason is that cwd has the necessary info vscode is missing.

However, I didn't mention that my goal was to make auto attach work.

The reason it didn't work was because of the way webpack generates source maps.

For anyone else facing this problem, I fixed it by changing webpack.config.js to generate source maps with relative file links, using the following:

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

Now debugging just works, and there's no need to create launch.json file

[adamwdennis]

Thanks @bddy, you're right that this will enable debugging - the reason is that cwd has the necessary info vscode is missing.

However, I didn't mention that my goal was to make auto attach work.

The reason it didn't work was because of the way webpack generates source maps.

For anyone else facing this problem, I fixed it by changing webpack.config.js to generate source maps with relative file links, using the following:

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

Now debugging just works, and there's no need to create launch.json file

This worked for me on latest (NX 18.3.3, @nest/core 10.1.3) ! Thank you @Gorthog , @bddy , and all others involved in coming up with this solution!

[fgirardey]

A minimalist workaround inspired by @Gorthog is to set devtoolModuleFilenameTemplate to [absolute-resource-path] and set sourceMap to true.

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

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

module.exports = {
  output: {
      devtoolModuleFilenameTemplate: "[absolute-resource-path]",
  },
  plugins: [
    new NxWebpackPlugin({
      target: 'node',
      compiler: 'tsc',
      main: './src/main.ts',
      tsConfig: './tsconfig.app.json',
      assets: ['./src/assets'],
      optimization: false,
      outputHashing: 'none',
      sourceMap: true
    }),
  ],
};

Maybe NxWebpackPlugin could do that by default?

[vdiaz1130]

Latest migration with Nx broke VS Code debugger. I tracked it down to this:

New (left side breaks). Old (right side) fixes VS Code debugging.

Hope this helps someone.