Generate UI not working for Jetbrains dev container

[mligtenberg]

Current Behavior

When running the NX console in a jetbrains dev container (Tested with Webstorm 2024.2 - 2024.3), the generate UI is blank.

Example devcontainer.json:
https://gist.github.com/mligtenberg/343d0e6eab64f1ccd2d9e10656c973de

Expected Behavior

I would expect to see the generation form as can been seen in a non dev container version of Webstorm.

Steps to Reproduce

Clone "https://github.com/nrwl/nx-examples" and create a folder called ".devcontainer" in it

Paste the following file in it (filename "devcontainer.json")
https://gist.github.com/mligtenberg/343d0e6eab64f1ccd2d9e10656c973de

(pull request with these changes will be added shortly)

Open Webstorm, in the welcome screen select dev container

select new dev container and then from local project

Select the devcontainer.json created from the gist, and press build

run npm i --force (currently some dependency is conflicting in nx-examples)
right click on the libs folder and select Nx Generate
create a new library project (I used @nx/angular - library)

the new tab opened will stay blank

This dev container can be started via "Webstorm" or "Gateway"

Failure Logs / Images / Videos

Environment

I'm running on MacOS

• Nx Console version:

• Local: v20.0.0-rc.0

• Global: v20.1.2

• Jetbrains version:

• Webstorm: 2024.3

[mligtenberg]

Small piece of extra info, the output of nx report:

Node : 22.9.0
OS : linux-arm64
Native Target : aarch64-linux
yarn : 1.22.22

nx (global) : 20.1.2
nx : 20.0.0-rc.0
@nx/js : 20.0.0-rc.0
@nx/jest : 20.0.0-rc.0
@nx/eslint : 20.0.0-rc.0
@nx/workspace : 20.0.0-rc.0
@nx/angular : 20.0.0-rc.0
@nx/cypress : 20.0.0-rc.0
@nx/devkit : 20.0.0-rc.0
@nx/eslint-plugin : 20.0.0-rc.0
@nx/react : 20.0.0-rc.0
@nx/web : 20.0.0-rc.0
@nx/webpack : 20.0.0-rc.0
typescript : 5.5.3

Registered Plugins:
@nx/eslint/plugin
@nx/cypress/plugin
@nx/jest/plugin

Community plugins:
@ngrx/component-store : 18.0.2
@ngrx/effects : 18.0.2
@ngrx/entity : 18.0.2
@ngrx/operators : 18.0.2
@ngrx/router-store : 18.0.2
@ngrx/store : 18.0.2
@ngrx/store-devtools : 18.0.2

[MaxKless]

Thanks! I'll look into this when I find the time.
In the meantime, could you provide some logs?
Go to Help > Diagnostic Tools > Debug Log Settings... and then insert #dev.nx.console:trace. Then paste the idea.log or sections of it when the error happens.

[mligtenberg]

So, when using a dev container you have both a host and a client so i did it for both. Here are the results after opening a generate tab

host idea.log: https://gist.github.com/mligtenberg/cb21ed7c7e8ff8e4614b99b7df1a7e60
client idea.log: https://gist.github.com/mligtenberg/45c63345a6064bcccae436baa47a934f

Some facts I discovered after some more exploring is that showing the graph does work.

The difference I found between the generation UI and the graph UI is the way the html is loaded.
In the generate UI the html is loaded via an url registered in the IDE: https://github.com/nrwl/nx-console/blob/master/apps/intellij/src/main/kotlin/dev/nx/console/generate/ui/file/NxGenerateUiFile.kt

in the graph UI it is loaded from HTML:
https://github.com/nrwl/nx-console/blob/master/apps/intellij/src/main/kotlin/dev/nx/console/graph/NxGraphBrowserBase.kt#L76

It could very well be that I'm running into undefined behavior in the JetBrains dev container setup.