I am testing Dashboard 2 to migrate my frontend. Among other things I try some nodes, which are developed for the new dashboard.
For example iframe, gauge-classic and flowviewer. The problem is that different from the standard D2 Nodes the additional nodes don't show anything.
In the log of the browser developement-tool are some messages:
No vue component found for ui-iframe, ui-gauge-classic, ....
I am not a frontend-developer and I think that some vue components are missing. I have no idea which vue-library is missing and how can I provide them. Perhaps I have to define some things in the settings-file to load something.
Did you restart node-red?
Can you show us the node red startup log please? It should start with Welcome to Node Red. Copy/paste the text please, not screenshot.
What browser and browser version? Can you post the full browser log/errors? Have you tried reinstalling the nodes? Have you tried another device/browser?
I am using Chrome the current version and I also test Edge.
I restart the container with all components. I restart nginx and the whole stuff.
I can send my browser log but I think it doesn't help only a few standard-messages.
I delete my whole node_modules-directory and make a fresh npm install.
All frontend-devices available are tested with the same result.
The description of #938 would fit but don't help in my situation,
sorry
[11140:20244:0725/190012.260:WARNING:chrome_main_delegate.cc(744)] This is Chrome version 127.0.6533.73 (not a warning)
[11140:20244:0725/190012.413:VERBOSE1:statistics_recorder.cc(607)] Collections of all histograms
Histogram: Chrome.ProcessSingleton.NotifyResult recorded 1 samples, mean = 1.0 (flags = 0x41)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 ...
Histogram: Chrome.ProcessSingleton.TimeToNotify recorded 1 samples, mean = 2.0 (flags = 0x41)
0 -O (1 = 100.0%)
10 ...
Histogram: Startup.LoadTime.RecordedProcessCreation recorded 1 samples, mean = 1.0 (flags = 0x1)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 O (0 = 0.0%) {100.0%}
Histogram: UMA.PersistentAllocator.BrowserMetrics.Errors recorded 0 samples (flags = 0x41)
0 ...
Histogram: UMA.PersistentAllocator.BrowserMetrics.UsedPct recorded 0 samples (flags = 0x41)
0 ...
Histogram: UMA.PersistentAllocator.EarlyHistograms.BrowserMetrics recorded 1 samples, mean = 1.0 (flags = 0x41)
0 O (0 = 0.0%)
1 -O (1 = 100.0%) {0.0%}
2 ...
@Roland Are you running any proxies on the nginx server? Or have Node-RED http admin settings configured? We've had issues in the past (which I thought we had resolved) around Dashboard being deployed in these environments.
@Colin Nothing is shown in the dashboard no gauge, no iframe, .. The space for the element is available but no content is shown.
If you mean the network-tab in the developement-console - 14 elements are loaded without any error (Http-Codes 101, 200, 304). I don't see no vue ressource (name containing "vue"), I don't know is that ok. @joepavitt I use proxies on nginx, but I stop the nginx-container and open the application direct using the ip:port/dashboard with the same result.
When you talk about http admin definitions in the settings-file, I don't use it.
Which vue-libraries (vue, vuetify, ...) are necessary ? Can I load them in the settings-file or is there a -statement on client-side missing, but why do the original dashboard 2 components (table, form, text input, template ....) work nicely ?
Sorry for my rookie questions and thanks for your help ?
When third party nodes are installed, they write to the package.json of the Node-RED install path, which tells Node-RED where the third party complied .js files are to serve up for the Dashboard to read.
This is why we need the Node-RED restart, as NR isn't aware of the changes until this has been done. Dashboard parses that package.json and looks for any third-party node entries, and the paths of their js files, if it can't find the files there (or the entires aren't in the package.json) we can only serve up a blank space.
Are you able to read the contents of the package.json file for your Node-RED install? Maybe something has prevented that being written to?
First : Can you give me an example what will be written into package.json - I don't realize anything. Second : Only an Idea. I work with two package.json files see example. These are the originals for the test-environment. I use this constellation for round about 15 container-environments.
The complete node_modules is in the first path. The first package.json is always the same.
The reason for that was an automatic handling of the application part and to reduce the backup-overhead. Because the relevant components without node_modules are separated in the second path.
I think this is no standard way.
An idea - when the process of the third-party nodes during installation expect their own entry for example "@flowfuse/node-red-dashboard-2-ui-iframe" in the package.json - they don't find it in my primary package.json, because they are defined in the second one. And then they make no entry.
I see you are using projects, @joepavitt the package.json file location is not in the same directory as flows file when projects are in use. I wonder whether anyone has tested this with projects. I don't use them.
[Edit] I got this wrong, the package.json file is in the project folder, not the .node-red folder, so perhaps this is the problem.
How are you installing the nodes? I thought that when using projects that it was the package.json in the .node-red folder that was used, but I may be wrong.
[Edit]Projects : Node-RED tells me that I am wrong, each project has its own package.json.
Just copy them from the second to the first (leave it in the second too) and restart node-red and see if it works. That may tell you whether this is the problem. It may have undesired side effects though, messing with package.json is generally not a good idea. Make sure you have up to date backups just in case.
?