Can't set breakpoints on NPM Link'ed library

Question

I learn React JavaScript and now I have this problem
I Fork the notistack library in GitHub then download my fork with Git Desktop so the project are on Windows 10 here D:/git/notistack.

After following npm-link doc it all work ok I can debug run the notistack library typescript project in VScode.

I "npm link" on my notistack library and "npm link notistack" in my ReactJs project all standard procedure and I can debug run the library ok. I make changes and rebuild notistack library and I see it's working ok.

But when I set up launch.json like this, with the runtimeArgs, that suppose to enable debugging I can't make breakpoints work in the Library.

{
  "version": "0.2.0",
  "configurations": [
      {
        "name": "Launch Edge",
          "request": "launch",
          "type": "pwa-msedge",
          "url": "https://localhost:6545",
          "webRoot": "${workspaceFolder}",
          "runtimeArgs": [
            "--preserve-symlinks"
        ],
      }
  ]
}

I set breakpoints in the ReactJs project node_module/notistack library but VSCode is setting them as unbound breakpoints.

I suspekt it has something to do with that that notistack library is a Typescript project maybe and I link to a ReactJs project. any idea? Please advice what I need to check and do?

Serilda

You can set and hit breakpoints outside the node_modules folder though, right? – Raama

@Raama I can have breakpoint in my app it's working as usual but setting B in the node_module/notistack no. I just forked the notistack did nothing more just npm link and I set some console.log in the notistack and see they are working so it's working to debug with console but so slow – Serilda

No no, I mean, can you set a breakpoint in your project, in which you are importing the fork? Does that work? – Raama

I can have breakpoint in my app it's working as usual in vscode – Serilda

There was one other strange thing I hade to do npm link ../app/node_module/react from notistack beside doing npm link` on it. I got the Redux duplicate React error. Even do notistack have react in the peerDependencies I hade to link it(think it was a bug) – Serilda

Some stupid thought: what if you start with npm start -- --preserve-symlinks and then try to debug? – Raama

@Raama npm start -- --preserve-symlinks did no difference – Serilda

For reference: #62784641 – Raama

The issue is that the args you are passing will be passed to the browser. You are correct that you need those flags to debug node.js code, but you are not doing that. You are simply starting a browser and attach to that (the browser just accesses the served website). I suspect your break point gets lost somewhere... maybe in WebPack? Definitely an interestng issue. – Raama

@Raama thanks for the "For reference" I saw it and commented on it to earlier. I have search for 2 days now and found just a couple with my problem but no fix. – Serilda

Let us continue this discussion in chat. – Raama

Answer 1

I looked this up, and saw some possible fixes,

• Did you try disabling this setting in VSCode?

"debug.javascript.usePreview": false

• Try these properties to your launch.json file

{
  "trace": true,
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}/src",
}

• Restarting VSCode or Downgrading the version

• Run -> Disable All Breakpoints, then Enable All Breakpoints

Fluted

There is no settings called "debug.javascript.usePreview"" – Serilda

In your VS Code settings JSON file, or you search the settings ui under the Debug section – Fluted

This settings I think is not available anymore I read here – Serilda

My bad @Kid. I didn't notice, I saw his answer is a good workaround as offered by Microsoft themselves. Have you tried any of my other options? – Fluted

Answer 2

None of the solutions I saw for this problem worked for me. I am a windows user ; I precise cause it works without this solution, on linux, for my colleagues. So I tried to found a configuration that works, the important parameter is outFiles :

"outFiles": [
  "${workspaceFolder}/**/*.js",
  "**/my-npm-linked-library/**/*.js"
  "!**/node_modules/**",
]

The second line of outFiles array is the most important. You can adapt the path to one who match better with the project you work on.

The order of the paths is important, here "!**/node_modules/**" is the last one cause we don't want to add "**/my-npm-linked-library/node_modules/*.js" in our outFiles.

! Important note ! : You must remove "--preserve-symlinks" and "--preserve-symlinks-main" inside runtimeArgs parameter. My understanding about that is limited, but it doesn't work whith these options.

Aesop

that didn't help with my linked library – Eckstein

Your library must contains sourcemap file. Each project and launch configuration contains specifities. You can create a post if you need an answer for your specific case. – Gallicism

it has the settings in angular.json. I'll create a post as I cannot find any working solution here on stackoverflow – Eckstein

Answer 3

Try adding the --preerve-symlinks-main to the runtimeArgs. It may solve the problem.

{
  "version": "0.2.0",
  "configurations": [
      {
        "name": "Launch Edge",
          "request": "launch",
          "type": "pwa-msedge",
          "url": "https://localhost:6545",
          "webRoot": "${workspaceFolder}",
          "runtimeArgs": [
            "--preserve-symlinks",
            "--preserve-symlinks-main"
        ],
      }
  ]
}

If you wanna read the docs before implementing, here is the link: https://nodejs.org/api/cli.html#cli_preserve_symlinks_main

Chaperone

Thanks I have tried that no difference i'm afraid. I have the latest npm -v and NODE v12. I just forked the notistack did nothing more just npm link and I set some console.log.. and see they are working so it's working to debug with console but so slow – Serilda

Maybe the app and notistack need to be in the same folder as the app node_module I have not tried that – Serilda

Yeah, puttiing both at the same folder as the app node_modules should work too – Mann

Answer 4

This can be a difficult question to answer without an example repo to view your setup. For example we don't know if you're trying to debug something for SSR or Client.

First question, are you debugging this module because it's not showing up in your App? If that's the case, and you're using Webpack to compile you may need to try resolve.symlinks: true.

Generally speaking, I try to debug my code via the software I'm using to view the compiled code. For React projects, that's usually a Browser. For stuff like Unit tests, debugging within VSCode is handy. The below suggestions are for debugging via the Browser.

For SSR

• Any node_modules should show up in your Sources panel, just as they would on your file system.
• Here's an article on setting Chrome up to debug Server code.
  • Basically, start your Server with the --inspect flag.
  • In an empty Browser tab go to chrome://inspect
  • If the Server was started with --inspect, it'll be listening for a debugging session to connect, and you should see your Server listed under the Remote Target section.
    • Some articles suggest clicking on the item listed under Remote Target, but I just use that as an indicator that my Server is listening. Instead I click on the Open dedicated DevTools for Node. Doing that has the same result, with the benefit of not having to reopen a debugging window if your Server restarts via something like nodemon.
  • Navigate to the Sources tab, and you can search for a specific source file or module to place a breakpoint in.

For Client

• You'll have to ensure that your compiler (Webpack, Rollup, Parcel - whatever you use), has source maps set up correctly. Also, compilers may have default settings to strip out any inlined debugger; statements, so you'll need to look into that and disable that when building for Local.
• If your source maps are set up, you should be able to go to the Sources tab (in Chrome's Devtools) and search for the file you want to debug and place some breakpoints.
• If source maps aren't set up, you most likely have a giant bundle file with all your node_modules and source files all compiled together (which could be why your breakpoints aren't firing currently).
  • In this case, you can try adding a debugger; line within your node_modules file, and see if the debugger stops now. Don't forget to reset the node_modules file after this testing step, it was purely for debugging and shouldn't remain of course.

Alphabetic

Thanks it's a CRA project only so I cant set any webpack setting like "resolve.symlinks: true", I think I do that in the Launch.json – Serilda

I will try the "chrome://inspect", thanks I learn something new I'm a novice – Serilda

@Kid, to maintain CRA (no ejection needed) but still be able to configure what you need, you can use the craco module. It worked for me on another project. – Alphabetic