How to debug NestJS webpack HMR in VSCode

Question

I am trying to debug NestJS application that has webpack HMR setup descibed in official docs

Here my VSCode launch.json file

    {
      "name": "Attach",
      "request": "attach",
      "type": "node",
      "restart": true,
      "sourceMaps": true,
      "internalConsoleOptions": "neverOpen",
      "localRoot": "${workspaceFolder}/dist",
      "skipFiles": [
        // Ignore node_modules folder when debugging.
        "${workspaceFolder}/node_modules/**/*.js",
        // Ignore NodeJS when debugging.
        "/**/*.js"
      ],
      "outFiles": ["${workspaceFolder}/dist/**/**.js"],
      "autoAttachChildProcesses": true
    }

here the webpack-hmt.config.json

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    devtool: 'inline-source-map',
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        nodeArgs: ['--inspect=0.0.0.0:9229'],
      }),
    ],
  };
};

Unfortunetly, when I run debugger and set a breakpoint in my controllers they don't get hit.

user_8831 · Answer

The answer is here: https://github.com/nestjs/nest-cli/issues/612

To summarize, in the webpack-hmr.config.js, add devtool: "inline-source-map", and add nodeArgs: ["--inspect=0.0.0.0:9229"] to the properties passed to RunScriptWebpackPlugin.

The entire webpack-hmr.config.js is:

const nodeExternals = require("webpack-node-externals");
const { RunScriptWebpackPlugin } = require("run-script-webpack-plugin");

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ["webpack/hot/poll?100", options.entry],
    devtool: "inline-source-map",
    externals: [
      nodeExternals({
        allowlist: ["webpack/hot/poll?100"],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        autoRestart: false,
        nodeArgs: ["--inspect=0.0.0.0:9229"],
      }),
    ],
  };
};

Then launch with this launch configuration:

    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run", "start:dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["/**"],
      "type": "node"
    }

How to debug NestJS webpack HMR in VSCode

1 Answers