# Uibuilder V6 library integratin

**URL:** <https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [11 August 2023 12:10 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497 "2023-08-11T12:10:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [11 August 2023 12:10 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/1 "2023-08-11T12:10:18Z")

</div>

I am using Niode-Red 3.0.2 and UIBuilder 6.4.1  
how can I insert the libraries so that the standard example works?

I get the following error message in the debug window:  
"[uibuilder:socket:addNs:uib-dynamic-svg-eg] [Socket.IO](http://Socket.IO) middleware failed to load for NS - check that uibRoot/.config/sioMiddleware.js has a valid exported fn."

---

<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:** [11 August 2023 12:47 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/2 "2023-08-11T12:47:40Z")

</div>

Hi, looks like you have specified a [socket.io](http://socket.io) middleware file. You will find those kinds of files in your `<uibRoot>/.config/` folder (where `<uibRoot>` would be `~/.node-red/uibuilder.` on a default installation.

By default, that folder contains 3 template files that have to export functions in a specific format. If you have renamed one of the templates to `*.js`, it will be picked up after a node-red restart. Simply rename it to end in something else and restart node-red.

---

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [16 August 2023 07:46 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/3 "2023-08-16T07:46:22Z")

</div>

hello, thanks that seems to have worked, there is no error message anymore.  
But now I have the next problem I installed the example: UIbuilder with MoonJS - simple, responsive UI  
Unfortunately I can't get the package installed in the library:  
Is there an example for installing?  
Am I right that there are 2 options: npm  
and once  
GH:  
at GH  
I entered the following:  
gh repo clone kbrsh/moon  
Unfortunately without success  
Can you please help me Thanks!!!

---

<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:** [16 August 2023 08:10 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/4 "2023-08-16T08:10:43Z")

</div>

Hi, check the uibuilder version that example relates to. I think it might be quite dated. I've not looked at MoonJS in a long time so I can't say whether its requirements have changed or not I'm afraid.

If you are wanting to use a framework package like Moon with uibuilder, you should use uibuilder's library tab and install it there. The npm version is generally the one you want.

---

<div class="post-metadata">

**Author:** ![ChrisWeb71](https://avatars.discourse-cdn.com/v4/letter/c/53a042/32.png) [@ChrisWeb71](https://discourse.nodered.org/u/ChrisWeb71)\
**Post date:** [16 August 2023 09:40 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/5 "2023-08-16T09:40:32Z")

</div>

what is the exact input to install a package in the uibuilder library, I keep getting error messages

---

<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:** [16 August 2023 16:26 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/6 "2023-08-16T16:26:29Z")

</div>

From the [MoonJS npm readme](https://www.npmjs.com/package/moonjs), the package is called simply `moon`. That is what you put into the top input field when adding a library.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d407c2d9334780793344a027ec7547e95c8a808a.png)

uibuilder then attempts to work out the correct link to add the library to your front-end html page (though note that this totally relies on package authors specifying something sensible which they don't always do).

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/9739536810affc85e07b3dded77aa3885aea052f.png)

A quick read of the Moon install guide shows that some adjustments are needed to make things work in the browser without a build step. You also need to add the `moon-browser` package. If you just want to test things, you can use an online version of Moon instead of having to add it to uibuilder.

This works for me - index.html

```auto
<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Testing MoonJS v1 - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Testing MoonJS v1">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/vendor/moon/dist/moon.min.js"></script>
    <script defer src="https://unpkg.com/moon-browser"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script type="text/moon" defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">Testing MoonJS v1</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

    <div id="root"></div><!-- Root structure for MoonJS -->

</body></html>

```

index.js (from one of their examples)

```auto
const button = Moon.view.m.button;

const increment = ({ data }) => {
    const dataNew = data + 1;

    return {
        data: dataNew,
        view: <view data=dataNew />
    };
};

const view = ({ data }) =>
    <button @click=increment > { data }</button >;

Moon.use({
    data: Moon.data.driver,
    view: Moon.view.driver("#root")
});

Moon.run(() => ({
    data: 0,
    view: <view data=0/>
}));

```

---

<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:** [15 October 2023 16:26 UTC](https://discourse.nodered.org/t/uibuilder-v6-library-integratin/80497/7 "2023-10-15T16:26:52Z")

</div>

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