NX Console interactive graph not working

[Playfrog4u]

Current Behavior

NX Console interactive graph is not working within VS Code on latest workspaces but does work when run the command nx graph.
Tried both on Mac and Windows.

A older project interactive graph still works so wondering if is plugin related or the latest NX.

Expected Behavior

NX Console interactive graph to show within VS Code

Steps to Reproduce

Run latest npx create-nx-workspace and choose angular, then integrated monorepo.
Once workspace is setup in VSCode if you press the NX Console graph nothings shows, but if run command in terminal nx graph the graph does in fact work.

Failure Logs / Images / Videos

Environment

Node : 22.16.0
OS : darwin-arm64
Native Target : aarch64-macos
npm : 11.4.2

nx (global) : 21.0.4
nx : 21.2.4
@nx/js : 21.2.4
@nx/jest : 21.2.4
@nx/eslint : 21.2.4
@nx/workspace : 21.2.4
@nx/angular : 21.2.4
@nx/devkit : 21.2.4
@nx/eslint-plugin : 21.2.4
@nx/module-federation : 21.2.4
@nx/playwright : 21.2.4
@nx/rspack : 21.2.4
@nx/web : 21.2.4
@nx/webpack : 21.2.4
typescript : 5.8.3

Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin

Community plugins:
angular-eslint : 20.1.1

Cache Usage: 0.00 B / 185.82 GB

• Nx Console version:
  18.58.0
• VSCode version: 1.102.1

[Playfrog4u]

I decided to test to see if creating a older version workspace using npx create-nx-workspace@15.8.9 and can confirm a older version of the nx workspace NX console interactive graph does work as expected

Node : 22.16.0
OS : darwin arm64
npm : 11.4.2

nx : 15.8.9
@nrwl/js : 15.8.9
@nrwl/jest : 15.8.9
@nrwl/linter : 15.8.9
@nrwl/workspace : 15.8.9
@nrwl/angular : 15.8.9
@nrwl/cli : 15.8.9
@nrwl/cypress : 15.8.9
@nrwl/devkit : 15.8.9
@nrwl/eslint-plugin-nx : 15.8.9
@nrwl/tao : 15.8.9
@nrwl/webpack : 15.8.9
typescript : 4.9.5

[MaxKless]

Could you share the output of your Developer Console?
Run Toggle Developer Tools and paste what you see there.

Thank you for the report! I'll be starting some work to make the nx graph a lot more stable next week, so this should become a LOT more reliable.

[x-etienne]

Hi @MaxKless, here the same problem.

My developer console show this.

I hope that this can help you

thanks

[MaxKless]

thank you!! Fix is coming soon :)

[LongLiveCHIEF]

@MaxKless what is the root cause? For some reason this works on my personal equipment on my home network, but not on my work machines on the private network. Is there something I can do on my end before the fix lands?

[MaxKless]

hmmmm that's interesting. Essentially, Nx Console communicates with the graph server that is spun up when running nx graph via http. Maybe that's being intercepted somehow?

[x-etienne]

Hi @MaxKless,
I have some suspect, the console say error while handling webview request Error: Server did not start within 10 seconds, I think there could be some problems with the graph server

I'm within

Node           : 20.19.3
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 11.5.2

nx (global)            : 21.6.3
nx                     : 21.4.1
@nx/js                 : 21.4.1
@nx/jest               : 21.4.1
@nx/eslint             : 21.4.1
@nx/workspace          : 21.4.1
@nx/angular            : 21.4.1
@nx/devkit             : 21.4.1
@nx/esbuild            : 21.4.1
@nx/eslint-plugin      : 21.4.1
@nx/module-federation  : 21.4.1
@nx/node               : 21.4.1
@nx/rspack             : 21.4.1
@nx/web                : 21.4.1
@nx/webpack            : 21.4.1
@nx/docker             : 21.4.1
typescript             : 5.8.3
---------------------------------------
Community plugins:
@ngrx/operators          : 20.0.1
@ngrx/signals            : 20.0.1
angular-auth-oidc-client : 19.0.2
angular-eslint           : 20.2.0
---------------------------------------
Cache Usage: 110.26 MB / 23.67 GB

[LongLiveCHIEF]

hmmmm that's interesting. Essentially, Nx Console communicates with the graph server that is spun up when running nx graph via http. Maybe that's being intercepted somehow?

That would not be uncommon with how vscode extensions setting work with the local proxy. VSCode has a setting that remote extensions host should use system proxy by default, and if this extension uses something other than localhost to connect to the graph server, then it could be this.

IDK if it helps troubleshoot from your end, but the project details works just fine.

Is there a difference in how the two views work?

[MaxKless]

Yes there's a big difference. The PDV is rendered directly with the project graph as an input. That makes it very stable.
The graph is set up to run nx graph in the background and will have nx console proxying between the view and the server. That makes it more prone to failure if for example nx.json breaks and the server has to be restarted. I have two PRs in progress to switch the graph to be the same as PDV but haven't had the time to finish it up yet.

[kongxiaojian123]

thank you!! Fix is coming soon :)

What you mean by "Fix is coming soon" is that it won't be fixed, right? This will be half a year in another two months, won't it?

[MaxKless]

No, what I mean by "Fix is coming soon" is that I will try my best to find the time to work on this. Sorry for setting expectations too high by saying "soon" - I have a branch that reworks this but making sure it's all the way there and polished isn't trivial.

If you're interesting in helping out in some way, feel free to let me know.

[thamera]

Tagging into this thread. I have the same issue. Brand new nx project. Latest Node, Latest VSCode, Latest NX, Console 18.83.1. Project details page opens fine. Opening graph from details page or from Nx Console just opens a blank tab. No debug messages. no output messages.