App.min.js:148 TypeError: Cannot read property 'themeState' of undefined

Hi,
I am trying to embed the node-red app into an existing app using this doc.
I have created a file according to the official doc. Now I want to inject a flow and see its dashboard.

var http = require('http');
var express = require("express");
var RED = require("node-red");

var flows = [{ "id": "2e7b0abc.b895c6", "type": "tab", "label": "Flow 1", "disabled": false, "info": "" }, { "id": "3cb312e1.19870e", "type": "inject", "z": "2e7b0abc.b895c6", "name": "", "topic": "", "payload": "", "payloadType": "date", "repeat": "1", "crontab": "", "once": true, "onceDelay": 0.1, "x": 150, "y": 160, "wires": [["d34dca7a.9d33f8"]] }, { "id": "592badab.9a40f4", "type": "ui_chart", "z": "2e7b0abc.b895c6", "name": "", "group": "99cb9d74.9e3e1", "order": 1, "width": 11, "height": 6, "label": "chart", "chartType": "line", "legend": "false", "xformat": "HH:mm:ss", "interpolate": "bezier", "nodata": "", "dot": false, "ymin": "0", "ymax": "50", "removeOlder": 1, "removeOlderPoints": "20", "removeOlderUnit": "3600", "cutout": 0, "useOneColor": false, "useUTC": false, "colors": ["#1f77b4", "#aec7e8", "#ff7f0e", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5"], "useOldStyle": false, "outputs": 1, "x": 510, "y": 160, "wires": [["1a8d7b6b.c602a5"]] }, { "id": "d34dca7a.9d33f8", "type": "function", "z": "2e7b0abc.b895c6", "name": "", "func": "msg.payload = Math.round(50*Math.random());\nreturn msg;", "outputs": 1, "noerr": 0, "x": 330, "y": 160, "wires": [["592badab.9a40f4"]] }, { "id": "1a8d7b6b.c602a5", "type": "debug", "z": "2e7b0abc.b895c6", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "x": 730, "y": 160, "wires": [] }, { "id": "99cb9d74.9e3e1", "type": "ui_group", "z": "", "name": "Default", "tab": "ee05c1dc.e4cf9", "order": 1, "disp": true, "width": 11, "collapse": false }, { "id": "ee05c1dc.e4cf9", "type": "ui_tab", "z": "", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false }];

var app = express();

// Add a simple route for static content served from 'public'
app.use("/", express.static("public"));

// Create a server
var server = http.createServer(app);

// Create the settings object - see default settings.js file for other options
var settings = {
  httpAdminRoot: "/red",
  httpNodeRoot: "/api",
  userDir: "./data/",
  functionGlobalContext: {},  // enables global context
  disableEditor: false,
  // ui: { path: "ui" }
};

// Initialise the runtime with a server and settings
RED.init(server, settings);

// Serve the editor UI
app.use(settings.httpAdminRoot, RED.httpAdmin);

// Serve the http nodes UI
app.use(settings.httpNodeRoot, RED.httpNode);

server.listen(process.env.port || 1880);

RED.start().then(() => {
  RED.runtime.flows.setFlows({ flows: { flows } });
});

This is my code. When I try to run this, it does not show me any error on console but my dashboard does not open. Instead a error is thrown in browser console. Same error vanishes if I press "Deploy" from editor UI.
I want to keep editor UI disabled and run it headless.

I think it's a bug between node-red and dashboard.

I fixed dashboard app.min.js file to solve undefined problem.

Download this file - https://github.com/martinLim45/share/blob/master/app.min.js
and replace node_modules/node-red-dashboard/dist/js/app.min.js.

Thanks, it worked.
But What was the problem and how did you resolve it?

A pull request with a fix would be useful

The problem is to execute setFlows() before themeState sets.

So, I added default setting value if themeState is undefined.

Won't that then end up wit the wrong theme ? (unless you always use the default).

@dceejay @Martin45
That's right. I tried changing the theme from "light" to "dark" from the editor but the theme doesn't change.
Also, Why does the theme does not get exported with the flows?

It does. It's in the flow file.

1 Like

Oh sorry, I guess I figured the problem out.
Exporting current flow does not exports the theme configuration. Even if its the only flow.
When I exported "All the flows", I didn't get the initial error anymore.
Actually the flow file missed the theme property.

really ? it should be part of the ui_base node in your flow json file.

    {
        "id": "83dc0246.80dd3",
        "type": "ui_base",
        "d": true,
        "theme": {
            "name": "theme-custom",
``

Dave, sorry to re-open this thread (felt like the right thing to do).

I have just updated a machine on V1.0.6 dashboard from 2.16.x to latest (2.22.1) and I get a very similar issue (restarted node-red, even restarted the server)...

Was this ever resolved? Is there a quick fix?

PS: Settings file is almost bog standard (no theme set)

EDIT more info...

NR Version 1.0.6, node v10.15.3.

  • Deleted settings & let it re-create - same issue
  • Deleted all flows (renamed file) restarted - imported original flows - same issue
  • Deleted all flows - restarted - added a single button - OK
  • Added a ui_table (V) - problem is back
  • Removed ui_table (leaving the button) and deployed - get no dashboard (only the "Welcome to the Node-RED Dashboard")
  • Restart node-red - back to showing the button only

Seems to be an issue with ui_table?

can you try with latest in master ?

node-red or ui_table dave?

dashboard :slight_smile:

lol

ok, but for completeness, I have just updated to latest node-red (1.1.0) - same issue when a table is added.

EDIT...

Installed direct from git npm install node-red/node-red-dashboard

Current status...
NR V1.1.0
Dashboard V2.22.2-beta

  • Added button only - OK
  • Added table - OK

Now to import original flow from NR1.0.6+Dashboard2.16.x export :crossed_fingers:

So this is now happening...

Imported original project - dashboard opens BUT...

New status...

  • upgraded to node v12
  • uninstalled all node-red nodes
  • cleared npm cache
  • re-installed node-red 1.1.0
  • re-installed dashboard from npm
  • completely removed ui-table

Cannot get dashboard to run (back to the original problem...

My thinking is...

  • something in dashboard changed and the flows are not 100% compatible
  • if I clear flows and add a UI item - dashboard is OK
  • when i import original flows, dashboard stops working

Is anything I can do to the flows instead of re-adding and re-configuring over 80 UI components?

If you are importing flows having already something on dashboard, does leads to same situation?
If you explore the exported flow json, do you see ui_base configuration part in it?

Latest from the saga..

  • Completely deleted everything NPM/Cache (including node-red)
  • Re-re-installed V1.1.0
  • re-re-re-installed dashboard - this time from a local clone of latest beta
  • removed all instances of non dashboard UI nodes (ui_table ui_svg) from the original flow
  • fired up node-red - Dashboard pages present and correct - OK
  • installed ui_svg & checked dashboard - Still OK
  • Restarted node-red & checked dashboard - Still OK
  • Added an ui_svg node & checked dashboard - Still OK
  • installed ui_table & checked dashboard - Still OK
  • Restarted node-red & checked dashboard - Still OK
  • Added an ui_table node & checked dashboard - Still OK

I am stumped - but alas it is working now!

Sorry - too late to do anymore testing :frowning:

EDIT...
@hotNipi I have looked in the original flow - there was/is a property "ui_base" - relevant?