Dashboard 2 ui-led not displaying

I've installed the ui-led for Dashboard 2. It appears in palette but not on dashboard
Seeing this error message in Chrome console
image

Node-Red version is 4.0.8
Dashboard version is 1.22.0

I've restarted node-red after installation and refreshed the browser

Sample flow

[
    {
        "id": "765de373b1e11b99",
        "type": "ui-led",
        "z": "bc44e168715d8ffa",
        "name": "",
        "group": "15eaa40bfde116bd",
        "order": 1,
        "width": "2",
        "height": "2",
        "label": "Status",
        "labelPlacement": "left",
        "labelAlignment": "left",
        "states": [
            {
                "value": "false",
                "valueType": "bool",
                "color": "#ff0000"
            },
            {
                "value": "true",
                "valueType": "bool",
                "color": "#00ff00"
            }
        ],
        "allowColorForValueInMessage": false,
        "shape": "circle",
        "showBorder": true,
        "showGlow": true,
        "x": 710,
        "y": 480,
        "wires": []
    },
    {
        "id": "f478bb7ec3dfff3a",
        "type": "inject",
        "z": "bc44e168715d8ffa",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 570,
        "y": 480,
        "wires": [
            [
                "765de373b1e11b99"
            ]
        ]
    },
    {
        "id": "e605f70591e21c6b",
        "type": "inject",
        "z": "bc44e168715d8ffa",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "false",
        "payloadType": "bool",
        "x": 570,
        "y": 520,
        "wires": [
            [
                "765de373b1e11b99"
            ]
        ]
    },
    {
        "id": "15eaa40bfde116bd",
        "type": "ui-group",
        "name": "About",
        "page": "2d89b02b4169d5cb",
        "width": "12",
        "height": 1,
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "2d89b02b4169d5cb",
        "type": "ui-page",
        "name": "About",
        "ui": "4740393b964cb7af",
        "path": "/page99",
        "icon": "information-outline",
        "layout": "notebook",
        "theme": "11edfaf96d0baec1",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 15,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "4740393b964cb7af",
        "type": "ui-base",
        "name": "Tiger",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-dropdown",
            "ui-chart",
            "ui-gauge",
            "ui-button",
            "ui-template"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "fixed",
        "titleBarStyle": "hidden",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "id": "11edfaf96d0baec1",
        "type": "ui-theme",
        "name": "Dark1",
        "colors": {
            "surface": "#424242",
            "primary": "#0094ce",
            "bgPage": "#424242",
            "groupBg": "#424242",
            "groupOutline": "#424242"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "2px",
            "groupGap": "6px",
            "groupBorderRadius": "4px",
            "widgetGap": "10px"
        }
    }
]

Can I check how you installed the LED node please? Via "Manage Palette" or otherwise?

From command line as my node-red server needs a proxy

npm install -g @flowfuse/node-red-dashboard-2-ui-led

Got it - thanks @gerrybartley - just linking to Dashboard-2 custom nodes not loading when installed globally - #12 by Steve-Mcl as that was also pointed out by someone else recently to be an issue when installing using the -g tag

Remove it (using -g) and install it again without -g

I've tried that without the -g, But when I restart Node-red its doesn't appear in the palette

As you already have a node in the flow using it, does it say flows stopped due to missing nodes when you restart node-red?

Will check logs in morning

No need to check the logs, it will tell you when you open the editor in the browser, and the flows will not be running.

My node-red is at work and I'm at home so can't check til morning :grinning:

I see nothing in the editor about missing nodes. Everything looks like it is running. The only message I see is in the chrome tool re: Vue component not found. There is nothing in the logs either referencing the ui-led node

Can you post your package.json file please. If you have a conventional install that will be in your .node-red folder.

So my setup is I have a number of instances using different ports
My dev environment runs on port 1882
This is the instance I've restarted and ui-led appears
The other instances have not been restarted

Starting this instance

2|Dev: 1882  | 15 Jan 09:02:53 - [info] Node-RED version: v4.0.8
2|Dev: 1882  | 15 Jan 09:02:53 - [info] Node.js  version: v20.16.0
2|Dev: 1882  | 15 Jan 09:02:53 - [info] Linux 5.14.0-427.40.1.el9_4.x86_64 x64 LE
2|Dev: 1882  | 15 Jan 09:02:53 - [info] Loading palette nodes
2|Dev: 1882  | 15 Jan 09:02:55 - [info] Dashboard version 3.6.5 started at /ui
2|Dev: 1882  | 15 Jan 09:02:55 - [info] Settings file  : /home/gbart/dashboards/p1882/settings.js
2|Dev: 1882  | 15 Jan 09:02:55 - [info] Context store  : 'default' [module=memory]
2|Dev: 1882  | 15 Jan 09:02:55 - [info] User directory : /home/gbart/dashboards/p1882
2|Dev: 1882  | 15 Jan 09:02:55 - [warn] Projects disabled : editorTheme.projects.enabled=false
2|Dev: 1882  | 15 Jan 09:02:55 - [info] Flows file     : /home/gbart/dashboards/p1882/flows.json
2|Dev: 1882  | 15 Jan 09:02:55 - [info] Server now running at http://127.0.0.1:1882/
2|Dev: 1882  | 15 Jan 09:02:55 - [warn]
2|Dev: 1882  | 15 Jan 09:25:48 - [info] +-----------------------------------------------------
2|Dev: 1882  | 15 Jan 09:25:48 - [info] | uibuilder v7.0.4 initialised đź“—
2|Dev: 1882  | 15 Jan 09:25:48 - [info] | root folder: /home/gbart/dashboards/p1882/uibuilder
2|Dev: 1882  | 15 Jan 09:25:48 - [info] | Using Node-RED's webserver at:
2|Dev: 1882  | 15 Jan 09:25:48 - [info] |   http://0.0.0.0:1882/
2|Dev: 1882  | 15 Jan 09:25:48 - [info] | Installed packages:
2|Dev: 1882  | 15 Jan 09:25:48 - [info] +-----------------------------------------------------
2|Dev: 1882  | 15 Jan 09:25:49 - [info] Starting flows
2|Dev: 1882  | 15 Jan 09:25:49 - [info] [ui-base:Tiger] Node-RED Dashboard 2.0 (v1.22.0) started at /dashboard
2|Dev: 1882  | 15 Jan 09:25:49 - [info] [ui-base:Tiger] Created socket.io server bound to Node-RED port at path /dashboard/socket.io


In this dir package.json just has this

{
    "name": "node-red-project",
    "description": "A Node-RED Project",
    "version": "0.0.1",
    "private": true
}

In my .node-red directory the file is exactly the same

I was expecting to see a list of modules and dependencies. I'm not familiar with how node-red organises things so maybe I'm looking in the wrong directory?
Any help is much appreciated

It isn't clear which package.json it is using. The best way to install is to use Manage Palette in the editor and let node-red sort it out for you.

I encountered the same with other dash-2 custom nodes..
Maybe stating the obvious, but what worked for me was to uninstall it globally (NPM uninstall -g) and then install locally (without the -g flag) from the Node-red home directory.

Ok. So changed to node-red directory and ran npm install without g and voila

image

Also ran the npm config commands to set the proxy and now it looks like I can use the Manage palette to do the install. Seems I need to do this before every npm install command unless there's a way to set it permanently

So is the solution to change to .node-red directory and then run npm install command without -g?
If so I'll mark @omrid response as the solution

Thanks for all the help

I think npm config should save the setting so you should not have to keep doing it.

That is correct

Yes it looks like it's saved. So it should always work but .......

Anyway I'm sorted for now. Thanks again for the help

Yeah, there is a shortfall with Dashboard currently, whreby Node-RED will pick up nodes in the global directory, but Dashboard does not. Dashboard is only constrained to local installs within the realm of Node-RED currently.

I've opened Third Party nodes not found when using global npm install · Issue #1584 · FlowFuse/node-red-dashboard · GitHub to track this issue