# Cant't load Javascript files in uibuilder

**URL:** <https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [19 January 2023 14:46 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917 "2023-01-19T14:46:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [19 January 2023 14:46 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/1 "2023-01-19T14:46:19Z")

</div>

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?

 ![Screenshot from 2023-01-19 18-17-12](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fbfd446c776e9d15d2d079a89daabfe90ead2edb.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 January 2023 16:16 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/2 "2023-01-19T16:16:20Z")

</div>

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](http://socket.io) library and you don't need to do a uibuilder.start() function in your JavaScript.

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [21 January 2023 06:36 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/3 "2023-01-21T06:36:54Z")

</div>

> [@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

```auto
<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](http://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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 January 2023 14:17 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/4 "2023-01-21T14:17:27Z")

</div>

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](#):
>
> ```auto
> <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:

```auto
<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](http://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.

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [22 January 2023 04:43 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/5 "2023-01-22T04:43:28Z")

</div>

> [@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`.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 January 2023 12:27 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/6 "2023-01-22T12:27:18Z")

</div>

> [@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:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f817f961bf5c4c0c930605c4203b6fbc7ad4bd99.png)

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac7e0f4de3cc53a4f48d2d0168c0c617246b6c4c.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/386912f23264efc2b0c349c6699ead912b9aeaff.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3abcc8ca5fa877443ef4256f17fd477fa9790f5c.png)  
and the standard messages:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/af6f9f8a2ffb6fb40ee6e27568472271b6dfb13c.png)

> [@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.

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [23 January 2023 14:48 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/7 "2023-01-23T14:48:09Z")

</div>

> [@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...

 ![Screenshot from 2023-01-23 18-14-53](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/77b81e650abe1639d9afaebf478cebd33306d797.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [23 January 2023 16:54 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/8 "2023-01-23T16:54:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 January 2023 17:46 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/9 "2023-01-23T17:46:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 March 2023 17:47 UTC](https://discourse.nodered.org/t/cantt-load-javascript-files-in-uibuilder/73917/10 "2023-03-24T17:47:20Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.