I recently upgraded from Node-Red 2.2.2 to 3.1.9. At the same time upgraded my R-PI module 4 to 12.5.
I completely reloaded the R-PI and Node-Red.
Then I imported the flows I saved from the original. I had some clean up to do but all fows appear to be working.
I need to cleanup the placement of the UI. When I open the Dashboard tab it is blank as seen below. I have restarted the R-PI and the laptop I'm using to access the node-red flows and UI.
Any ideas on what I've missed?
Please stop node red and start it again using
node-red-stop
node-red-start
and copy/paste the full output here. Copy/paste please, not screenshot.
Start Node-RED
Once Node-RED has started, point a browser at http://10.0.0.143:1880
On Pi Node-RED works better with the Firefox or Chrome browser
Use node-red-stop to stop Node-RED
Use node-red-start to start Node-RED again
Use node-red-log to view the recent log output
Use sudo systemctl enable nodered.service to autostart Node-RED at every boot
Use sudo systemctl disable nodered.service to disable autostart on boot
To find more nodes and example flows - go to http://flows.nodered.org
Starting as a systemd service.
15 May 09:29:51 - [info]
Welcome to Node-RED
15 May 09:29:51 - [info] Node-RED version: v3.1.9
15 May 09:29:51 - [info] Node.js version: v18.20.2
15 May 09:29:51 - [info] Linux 6.6.28+rpt-rpi-v8 arm64 LE
15 May 09:29:53 - [info] Loading palette nodes
15 May 09:29:56 - [info] Dashboard version 3.6.5 started at /ui
15 May 09:29:57 - [info] Settings file : /home/RSI/.node-red/settings.js
15 May 09:29:57 - [info] Context store : 'default' [module=memory]
15 May 09:29:57 - [info] User directory : /home/RSI/.node-red
15 May 09:29:57 - [info] Projects directory: /home/RSI/.node-red/projects
15 May 09:29:57 - [info] Server now running at http://127.0.0.1:1880/
15 May 09:29:57 - [info] Active project : Fireless
15 May 09:29:57 - [info] Flows file : /home/RSI/.node-red/projects/Fireless/flows.json
15 May 09:29:57 - [info] Starting flows
15 May 09:29:57 - [info] Started flows
Also, I tried using the Firefox browser on my R-PI with the same result.
In an old related issue some asked about the node-red-dashboard under the manage palette. I see 21 nodes listed there.
I expected to get a clue from the log, but it looks ok.
If you open the developer console in the browser and refresh the page do you see any errors in the console?
can you list the nodes you have installed?
you can get this from /home/RSI/.node-red/package.json or the palette manager or the system info (ctrl-shift-p -> type system info -> enter)
No errors on refresh.
{
"report": "diagnostics",
"scope": "basic",
"time": {
"utc": "Wed, 15 May 2024 17:22:41 GMT",
"local": "5/15/2024, 1:22:41 PM"
},
"intl": {
"locale": "en-US",
"timeZone": "America/New_York"
},
"nodejs": {
"version": "v18.20.2",
"arch": "arm64",
"platform": "linux",
"memoryUsage": {
"rss": 132726784,
"heapTotal": 69505024,
"heapUsed": 61380400,
"external": 2148930,
"arrayBuffers": 210770
}
},
"os": {
"wsl": false,
"totalmem": 1936650240,
"freemem": 1156718592,
"arch": "arm64",
"loadavg": [
0.06,
0.02,
0
],
"platform": "linux",
"release": "6.6.28+rpt-rpi-v8",
"type": "Linux",
"uptime": 70379.39,
"version": "#1 SMP PREEMPT Debian 1:6.6.28-1+rpt1 (2024-04-22)"
},
"runtime": {
"version": "3.1.9",
"isStarted": true,
"flows": {
"state": "start",
"started": true
},
"modules": {
"node-red": "3.1.9",
"node-red-contrib-buffer-parser": "3.2.2",
"node-red-contrib-string": "1.0.0",
"node-red-node-ui-list": "0.3.6",
"node-red-node-ui-table": "0.4.3",
"node-red-contrib-fs-ops": "1.6.0",
"node-red-html-to-text": "0.0.1",
"node-red-contrib-ui-led": "0.4.11",
"node-red-contrib-simpletime": "2.11.1",
"node-red-dashboard": "3.6.5",
"node-red-contrib-play-audio": "2.5.0",
"node-red-node-pi-gpio": "2.0.6",
"node-red-node-ping": "0.3.3",
"node-red-node-random": "0.4.1",
"node-red-node-serialport": "2.0.2",
"node-red-node-smooth": "0.1.2"
},
"settings": {
"available": true,
"apiMaxLength": "UNSET",
"disableEditor": false,
"contextStorage": {},
"debugMaxLength": 1000,
"editorTheme": {
"palette": {},
"projects": {
"enabled": true,
"workflow": {
"mode": "manual"
}
},
"codeEditor": {
"lib": "monaco",
"options": {}
}
},
"flowFile": "flows.json",
"mqttReconnectTime": 15000,
"serialReconnectTime": 15000,
"socketReconnectTime": "UNSET",
"socketTimeout": "UNSET",
"tcpMsgQueueSize": "UNSET",
"inboundWebSocketTimeout": "UNSET",
"runtimeState": "UNSET",
"adminAuth": "UNSET",
"httpAdminRoot": "/",
"httpAdminCors": "UNSET",
"httpNodeAuth": "UNSET",
"httpNodeRoot": "/",
"httpNodeCors": "UNSET",
"httpStatic": "UNSET",
"httpStaticRoot": "UNSET",
"httpStaticCors": "UNSET",
"uiHost": "SET",
"uiPort": "SET",
"userDir": "SET",
"nodesDir": "UNSET"
}
}
}type or paste code here
All looks well there 
Can you check in browsers console following these actions:
- switch to debug tab on side-bar
- refresh browser
- open browsers dev tools (usually F12 key does it) and select the console tab
- switch to the dashboard tab on the side-bar in node-red editor
You need to open the console and look for messages
And by the looks of it, there are errors!
VM428:1995
Uncaught ReferenceError: d is not defined
at Object.addItem (<anonymous>:1995:78)
at V.<computed>.<computed>.insertItemAt (red.min.js?v=33c8c6909765:18:28309)
at a.<computed> [as insertItemAt] (vendor.js?v=33c8c6909765:10:1122)
at V.<computed>.<computed>.addItem (red.min.js?v=33c8c6909765:18:28508)
at a.<computed> [as addItem] (vendor.js?v=33c8c6909765:10:1122)
at HTMLOListElement.<anonymous> (vendor.js?v=33c8c6909765:10:2133)
at Function.each (vendor.js?v=33c8c6909765:2:2976)
at s.fn.init.each (vendor.js?v=33c8c6909765:2:1454)
at V.fn.<computed> [as editableList] (vendor.js?v=33c8c6909765:10:1951)
at <anonymous>:2089:40
at Array.forEach (<anonymous>)
at Object.addItem (<anonymous>:2088:47)
at V.<computed>.<computed>.insertItemAt (red.min.js?v=33c8c6909765:18:28309)
at a.<computed> [as insertItemAt] (vendor.js?v=33c8c6909765:10:1122)
at V.<computed>.<computed>.addItem (red.min.js?v=33c8c6909765:18:28508)
at a.<computed> [as addItem] (vendor.js?v=33c8c6909765:10:1122)
at HTMLOListElement.<anonymous> (vendor.js?v=33c8c6909765:10:2133)
at Function.each (vendor.js?v=33c8c6909765:2:2976)
at s.fn.init.each (vendor.js?v=33c8c6909765:2:1454)
at V.fn.<computed> [as editableList] (vendor.js?v=33c8c6909765:10:1951)
at <anonymous>:2150:32
at Array.forEach (<anonymous>)
at Object.addTabOrLinkItem [as addItem] (<anonymous>:2149:37)
at V.<computed>.<computed>.insertItemAt (red.min.js?v=33c8c6909765:18:28309)
at a.<computed> [as insertItemAt] (vendor.js?v=33c8c6909765:10:1122)
at V.<computed>.<computed>.addItem (red.min.js?v=33c8c6909765:18:28508)
at a.<computed> [as addItem] (vendor.js?v=33c8c6909765:10:1122)
at HTMLOListElement.<anonymous> (vendor.js?v=33c8c6909765:10:2133)
at Function.each (vendor.js?v=33c8c6909765:2:2976)
at s.fn.init.each (vendor.js?v=33c8c6909765:2:1454)
at V.fn.<computed> [as editableList] (vendor.js?v=33c8c6909765:10:1951)
at <anonymous>:2453:42
at Array.forEach (<anonymous>)
at refresh (<anonymous>:2452:35)
at Object.onchange (<anonymous>:2588:44)
at Object.onchange (red.min.js?v=33c8c6909765:18:320862)
at _ (red.min.js?v=33c8c6909765:18:63442)
at Object.onselect (red.min.js?v=33c8c6909765:18:69104)
at f (red.min.js?v=33c8c6909765:18:48043)
at HTMLAnchorElement.<anonymous> (red.min.js?v=33c8c6909765:18:46686)
at HTMLAnchorElement.dispatch (vendor.js?v=33c8c6909765:2:43090)
at v.handle (vendor.js?v=33c8c6909765:2:41074)
addItem @ VM428:1995
insertItemAt @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
addItem @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ vendor.js?v=33c8c6909765:10
each @ vendor.js?v=33c8c6909765:2
each @ vendor.js?v=33c8c6909765:2
V.fn.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ VM428:2089
addItem @ VM428:2088
insertItemAt @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
addItem @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ vendor.js?v=33c8c6909765:10
each @ vendor.js?v=33c8c6909765:2
each @ vendor.js?v=33c8c6909765:2
V.fn.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ VM428:2150
addTabOrLinkItem @ VM428:2149
insertItemAt @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
addItem @ red.min.js?v=33c8c6909765:18
a.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ vendor.js?v=33c8c6909765:10
each @ vendor.js?v=33c8c6909765:2
each @ vendor.js?v=33c8c6909765:2
V.fn.<computed> @ vendor.js?v=33c8c6909765:10
(anonymous) @ VM428:2453
refresh @ VM428:2452
onchange @ VM428:2588
onchange @ red.min.js?v=33c8c6909765:18
_ @ red.min.js?v=33c8c6909765:18
onselect @ red.min.js?v=33c8c6909765:18
f @ red.min.js?v=33c8c6909765:18
(anonymous) @ red.min.js?v=33c8c6909765:18
dispatch @ vendor.js?v=33c8c6909765:2
v.handle @ vendor.js?v=33c8c6909765:2
One new thing I've done is I started using the UI_Template to make buttons becouse I think it looks better. Heres an example flow.
[
{
"id": "cdcf7e5d1e73c9b7",
"type": "tab",
"label": "Backup",
"disabled": false,
"info": "",
"env": []
},
{
"id": "cad36746155aec34",
"type": "exec",
"z": "cdcf7e5d1e73c9b7",
"command": "/home/RSI/zipFwDev.sh",
"addpay": "",
"append": "",
"useSpawn": "true",
"timer": "",
"winHide": false,
"oldrc": false,
"name": "",
"x": 950,
"y": 280,
"wires": [
[],
[],
[]
]
},
{
"id": "5dea85ef254e5e76",
"type": "function",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"func": "\nreturn msg;",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 720,
"y": 280,
"wires": [
[
"cad36746155aec34"
]
]
},
{
"id": "16485cf7e9df33d7",
"type": "function",
"z": "cdcf7e5d1e73c9b7",
"name": "Set base path",
"func": "\nvar basePath = \"/home/RSI\"; //\"c:\\\\temp\\\\\";\n//var filename = msg.req.params.fn; //\"Fireless.txt\";\n\n\nmsg.filename = \"/home/RSI/FWDevZip.zip\"//+ \"/Fireless.txt\"\nreturn [msg, null];//fire output 1\n\n\n",
"outputs": 2,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 720,
"y": 540,
"wires": [
[
"d9fcc885a308d2da"
],
[
"4402695ea186f79e"
]
]
},
{
"id": "4402695ea186f79e",
"type": "http response",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"statusCode": "",
"headers": {},
"x": 1070,
"y": 580,
"wires": []
},
{
"id": "d9fcc885a308d2da",
"type": "file in",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"filename": "",
"format": "",
"chunk": false,
"sendError": false,
"encoding": "none",
"allProps": false,
"x": 910,
"y": 520,
"wires": [
[
"4402695ea186f79e"
]
]
},
{
"id": "cc59186e2cd103c4",
"type": "catch",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"scope": null,
"uncaught": false,
"x": 540,
"y": 620,
"wires": [
[
"f7b95daba18ab5ab"
]
]
},
{
"id": "f7b95daba18ab5ab",
"type": "function",
"z": "cdcf7e5d1e73c9b7",
"name": "Set 404",
"func": "msg.payload = msg.error;\nmsg.statusCode = 404;//resource not found\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 920,
"y": 620,
"wires": [
[
"4402695ea186f79e"
]
]
},
{
"id": "fbb2137cd3d1d515",
"type": "comment",
"z": "cdcf7e5d1e73c9b7",
"name": "Create http endpoint <nodered>/files/xxx where xxx is the file name to download",
"info": "",
"x": 760,
"y": 480,
"wires": []
},
{
"id": "624a3350da7da682",
"type": "http in",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"url": "/files1/:fn",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 510,
"y": 540,
"wires": [
[
"16485cf7e9df33d7"
]
]
},
{
"id": "326864e7442935b0",
"type": "ui_button",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"group": "5ec2a32b42ba0fc4",
"order": 1,
"width": "",
"height": "",
"passthru": false,
"label": "ZIP IT 1st!!!!",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "",
"payloadType": "str",
"topic": "topic",
"topicType": "str",
"x": 540,
"y": 280,
"wires": [
[
"5dea85ef254e5e76"
]
]
},
{
"id": "f106abae99988d39",
"type": "ui_template",
"z": "cdcf7e5d1e73c9b7",
"group": "5ec2a32b42ba0fc4",
"name": "ui_temlplate - present download links on dashboard",
"order": 1,
"width": "",
"height": "",
"format": "\n<div>\n <a href=\"/files1/FWDevZip.zip\" style=\"background-color: blue; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; fa fa-download\"> save it 2nd!!! <i class=\"fa fa-download\" aria-hidden=\"true\"></i></a>\n</div>\n ",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 710,
"y": 340,
"wires": [
[]
]
},
{
"id": "7e761933fb855bd4",
"type": "inject",
"z": "cdcf7e5d1e73c9b7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 420,
"y": 220,
"wires": [
[
"cad36746155aec34"
]
]
},
{
"id": "5ec2a32b42ba0fc4",
"type": "ui_group",
"name": "Start Backup",
"tab": "a9680811b0692bd0",
"order": 1,
"disp": true,
"width": 6,
"collapse": false
},
{
"id": "a9680811b0692bd0",
"type": "ui_tab",
"name": "BackUp",
"icon": "dashboard",
"order": 11
}
]
I took a 2nd R-PI and did all the updated and then started importing my flows a few nodes at a time. I found when I add this node my UI turns blank. Oddly, the dashboard tab display looks to be OK.
[
{
"id": "98935814809ba552",
"type": "ui_list",
"z": "32ae9aef947e3fc1",
"group": "fd7321db.91e1",
"name": "Debug Responce",
"order": 9,
"width": 26,
"height": 6,
"lineType": "two",
"actionType": "none",
"allowHTML": true,
"outputs": 0,
"topic": "",
"x": 1090,
"y": 1200,
"wires": []
},
{
"id": "fd7321db.91e1",
"type": "ui_group",
"name": "Select Location",
"tab": "d83c9f1.1a1f66",
"order": 2,
"disp": true,
"width": 26,
"collapse": false
},
{
"id": "d83c9f1.1a1f66",
"type": "ui_tab",
"name": "Debug Tools",
"icon": "dashboard",
"order": 2
}
]
I also see these errors on the console I started node red in.
16 May 16:15:10 - [info] Dashboard version 3.6.5 started at /ui
TypeError: Cannot read properties of undefined (reading 'group-textColor')
at new ListNode (/home/RSI/.node-red/node_modules/node-red-node-ui-list/ui_list.js:129:40)
at Object.createNode (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/flows/util.js:190:27)
at Flow.start (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/flows/Flow.js:261:54)
at async start (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/flows/index.js:403:17)
16 May 16:15:10 - [error] [ui_list:98935814809ba552] TypeError: Cannot read properties of undefined (reading 'push')
16 May 16:15:10 - [info] Started flows
I imported my flows a few nodes at a time. While I can't say why, I found that it was some Text nodes that caused the issue. I had to bring in new Text nodes to replace the ones that caused the issue.
Here is an example of one of the nodes causing the issue:
[
{
"id": "81b3ec6b758b1d86",
"type": "ui_text_input",
"z": "184ccc549fd4907f",
"name": "",
"label": "",
"tooltip": "",
"group": "c585fbfb.3a9688",
"order": 6,
"width": "",
"height": "",
"passthru": true,
"mode": "text",
"delay": "100",
"topic": "topic",
"sendOnBlur": true,
"className": "",
"topicType": "str",
"x": 980,
"y": 1140,
"wires": [
[
"b3e97097334d5dbf"
]
]
},
{
"id": "c585fbfb.3a9688",
"type": "ui_group",
"name": "Update Description and Accept",
"tab": "8bad4a75.48931",
"order": 2,
"disp": true,
"width": 5,
"collapse": false
},
{
"id": "8bad4a75.48931",
"type": "ui_tab",
"name": "Manage Remotes",
"icon": "dashboard",
"order": "",
"disabled": false,
"hidden": false
}
]
Maybe someone with more knowledge can figure out the root cause.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
