Cant't load Javascript files in uibuilder

[miladmrm]

I use uibuilder to manage my front-end. I have several HTML pages and each page has it's own Javascript files, but I have problem with one of them, sometimes and recurersly i got this error.

Uncaught TypeError: a.socket is undefined

and after many try by page reload, Page can to load page JS file. What is the problem?

[TotallyInformation]

OK, lets start by getting some details. Can you please share the following:

• Version of uibuider in use
• Version of Node-RED
• Version of node.js
• What browser are you using?

Can you also please share the section of your HTML that is loading your JS libraries.

Also, if you are using Node-RED v3+, Node.js v14+ and uibuilder 6.0, have you considered updating your code to use the new IIFE library? With that, you don't need to try to load the socket.io library and you don't need to do a uibuilder.start() function in your JavaScript.

[miladmrm]

@TotallyInformation

Version of uibuider in use

v5.1.1

@TotallyInformation

Version of Node-RED

v3.0.2 node-red docker image

@TotallyInformation

Version of node.js

v14.21.2

@TotallyInformation

What browser are you using?

Firefox

@TotallyInformation

Can you also please share the section of your HTML that is loading your JS libraries

<script src="../uibuilder/vendor/socket.io/socket.io.js">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
<script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
<script src="js/olSeeMission.js"></script>

@TotallyInformation

Also, if you are using Node-RED v3+, Node.js v14+ and uibuilder 6.0, have you considered updating your code to use the new IIFE library? With that, you don't need to try to load the socket.io library and you don't need to do a uibuilder.start() function in your JavaScript.

I use v 5.1.1 uibuilder and according to image this error occurs when I try to send msg to Node-RED by following piece of code:

const op = performance.getEntriesByType("navigation")[0].type;
if((window.location.href === "http://localhost:1890/platform/seeMission.html" || window.location.href === "https://127.0.0.1:1890/platform/seeMission.html") && ( op === "reload" || op === "navigate" || reload === "back_forward" || op === "prerender")) {
        uibuilder.send({
            topic: "Missions-Name",
            payload: "1"
        });
}

I use this code to load data from database when page reload and etc... so data and my map api can't load sometimes.

[TotallyInformation]

Right, so several things to clear up.

First, your error message implies the use of jQuery somewhere and that isn't listed in your html snippet.

Secondly, if you updated uibuilder to the latest version, v6.0, you could replace

@miladmrm

<script src="../uibuilder/vendor/socket.io/socket.io.js">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
<script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
<script src="js/olSeeMission.js"></script>

with:

<script src="../uibuilder/uibuilder.iife.min.js">/</script>
<script src="./js/olSeeMission.js"></script>

And you could remove uibuilder.start() from your JavaScript as is wouldn't be needed any more.

---

The next issue is that you don't need all that code in your front-end javascript, uibuilder already does the work for you. The 2nd output of the uibuilder node outputs control messages. Most importantly, the "client connect" control message. That is issued both when a new client connects and when an existing client reloads the page. So you can use that output to re-query your db and send the data.

---

As for the error itself, check in the networks tab of your browser's dev tools to make sure that the socket.io client actually loaded.

I actually suspect that the problem is that you didn't run uibuilder.start() which is required for the older uibuilderfe.js client.

[miladmrm]

@TotallyInformation

Most importantly, the "client connect" control message.

How can I use this output? I mean that I want to control this message that query or re-query special data, not all data, in other words each page data is different and I want query or re-query that page's data and send to that page js file.

@TotallyInformation

I actually suspect that the problem is that you didn't run uibuilder.start() which is required for the older uibuilderfe.js client.

I use two js file for that page and only in one of them I run uibuilder.start(), I think problem is this. Anyway, I think I need to update my uibuilder.

[TotallyInformation]

@miladmrm

How can I use this output? I mean that I want to control this message that query or re-query special data, not all data, in other words each page data is different and I want query or re-query that page's data and send to that page js file.

Have you checked the output? From v6.0 with the uibuilder.iife.min.js client:

It includes the originating page name.

So you can build a flow within node-red that does the correct query for the page.

If you want to, you can also include this information in standard messages from the front-end as well:

From the next release (v6.1), you will get even more information in both the client connect message:

and the standard messages:

@miladmrm

I use two js file for that page and only in one of them I run uibuilder.start(), I think problem is this.

You should only run uibuilder start once (or not bother at all with the new client though it doesn't actually hurt). the uibuilder object exists globally so it should be accessible from both js files. With the old client, you would need to have made sure that you ran uibuilder.start early enough though. You can always put in a check in your code if you aren't sure. Something like if (! window['uibuilder']) .....

@miladmrm

Anyway, I think I need to update my uibuilder.

I think you will find that helpful. Each release fixes more bugs if nothing else.

[miladmrm]

@TotallyInformation

Have you checked the output? From v6.0 with the uibuilder.iife.min.js client:

How you can get that output?
I get nothing...

[bakman2]

Set the debug nodes to output the complete msg object as you are currently only looking as msg.payload which does not contain anything.

[TotallyInformation]

Thanks for stepping in there

Yes, sorry, the control msgs don't use msg.payload, maybe they should have done but it is a bit late now and people are already using the existing properties so I don't really want to change them as it will break people's flows.

I really wish that the default setting on the debug node was to show the whole message. The updated example flows in v6.1 will have the debug nodes set correctly.