About debug NestJS in Nx using WebStorm

[LouisSung]

Updated

This issue (for WebStorm) has been solved and explained below, and @Areen3 also gives a comment for VSCode

Prerequisites

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

Sorry for not asking question on Stack Overflow because I think it might be a common issue and GitHub is a better place to share these information.

• As mentioned in title, I'd like to migrate from Angular + NestJS to Nx but I cannot set up debug environment as I did in pure NestJS demo project.
  • I wonder if there could have some official tutorials about how to debug using common IDEs/editors like for VSCode or WebStorm (e.g., put on the https://nx.dev/)
    • Or maybe if I just miss one !?
• Here's how the original NestJS works as the screenshot below.
  • The debugger stop at the breakpoint when getting request in the *.controller.ts file as expected.
    

Current Behavior

• I've tried to use the same way to debug Nx-NestJS project, but I got 2 results as shown below.
  • I wonder if the only way to debug is using the compiled dist/api/main.js, or I can do it in the original *.controller.ts file?
  1. Using original *.controller.ts that failed due to import issue
     
  2. Using compiled dist/api/main.js that works but quite tricky
     

Thanks for your help :)

[LouisSung]

I finally solve this problem by adding {"module": "commonjs"} to tsconfig.json :D

To be precise, this is issue about ts-node rather than Nx and WebStorm.

Refer: blakeembrey@TypeStrong/ts-node#922

Hope this helps those who are struggling with debug Nx project using ts-node.

[LouisSung]

BTW, just for sharing, the webpack.prod.config.js is there to enable obfuscation for NestJS using webpack-obfuscator.

Refer: puku0x@nrwl/nx#2112

Hope this helps too :D

---

apps/api/webpack.prod.config.js

const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = (config, context) ={
  config.plugins.push(new JavaScriptObfuscator({rotateUnicodeArray: true}));
  return config;
};

angular.js

{
  "projects": {"api": {"architect": {"build": {
          "configurations": {
            "production": {
              "sourceMap": false,
              "webpackConfig": "apps/api/webpack.prod.config.js"
            }}}}}}
}

---

• Other issues I faced
  • NestJS + Electron: Error: Cannot find module 'tslib': nrwl/nx#2625 and nestjs/nest#1706

[Areen3]

I had similar problem but under VSCode
You have right it is from node

problem was with working directory
this is exlained in https://blog.logrocket.com/es-modules-in-node-today/

when I set properly working directory in VSCode using:

these errors desapear

[LouisSung]

Hi @Areen3, thank you for sharing solutions with others
However, I'm not familiar with VSCode, would you like to share some further explanations on what's the problem you met, how to make a minimal reproduction, and how you solved it by setting the cwd?

Thank you 😄

[Areen3]

Hi
here is repo:
https://github.com/Areen3/ws-error-link

thisl repo works super with VScode but not working under WebStorm
I spend a lot of time to solve this but without any result

please download repo , this contain one simple project and one library working with node
next npm install
and run
nx serve
you will see

problem is that, these links with error are not cilckable under WS but on this same project in VScod are clickable
I try run this serve command using

in mode run or debug and not workint
And I don't know why -
I've already tried everything that came to my mind and yet this is the basic configuration for working with webstor
summarizing
please help me because I don't know what it is

[Areen3]

hi
problem is with path and slash-backslash
it is example from Webstorm with plugin awsome-console

and this is example from VSCode

and this not working from Webstrorm

and working from VSCode

this / and \ is configurable somewhere ?
after taking a closer look, I realize that this may not be a question that is not up to nx,
however, some of us use Webstorm, maybe someone has a workaround ???

greetings Piotr

[Areen3]

I think that, that problem shoud be solved,
using plugins like awsome-console
or AutoLink so you can navigate in the console does not look professional.
I think you just correct it because it's not difficult and it's very tedious :)

[vivek261991]

@LouisSung Thanks for sharing your problem description and your solution. This helped me to setup webstorm to debug nest-js application.

Earlier, I was not able to debug with webstorm , each time I entered src/main.ts I got import error.
If I used the compiled javascript file -> dist/src/main.js, the debug worked, but it wouldn't pick up the modified code. I had to do build nest to make sure dist gets the updated code.

However, I have question on the Node Parameters :
Whats the difference between?

1. -r ts-node/register
2. -r ts-node/register -r tsconfig-paths/register

Both 1 and 2 worked.

[LouisSung]

HI, I'm glad to hear that it helps~
About the -r tsconfig-paths, I think it's related to dividab/tsconfig-paths, used to solve some special path resolving cases that tsc can compile correctly but ts-node don't (as mentioned in its readme).

I haven't met a situation that requires that devDependency; therefore, what I can say is that the 2. -r tsconfig-paths/register one requires you to do npm install --save-dev tsconfig-paths while the 1. -r ts-node/register doesn't.
If the 1. works fine, then you should keep using 1. until you met the issues related to path resolving

[skorunka]

The tsconfig-paths is required if you are using path aliases like:

tsconfig.json

	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@my/lib": ["libs/my-lib/src/index.ts"],

code

import * as lib from "@my/lib"

[tommyc38]

For anyone else wanting to know how to debug NestJs with WebStorm, here are a few tips:

When you run nx serve "nest-app-goes-here" you will see that WebStorm automatically creates a debugging server. Note which port these are listening on.

Next, create a run configuration in WS and select Attach to Nodejs/Chrome and create a new configuration by adding the port number. Now add your breakpoints and click on one of the debuggin links above which will open the debugger window in WS. Now use a rest client to send a request to trigger a breakpoint and it should work as expected.

You can also edit your serve configuration in your angular.json file (it maybe called something else if you aren't using angular) by adding `port: "port number goes here - 9229 is standard though". Then change your WS run configuration to use this port and now anytime you serve the application, all you need to do is click on the debugger link to launch the debugger and it should work without needing to change the port number in your run configurations (Nx automatically assigns a random open port each time the app is initially launched).

[github-actions]

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.