# Trying to load npm package justgage into UIBUILDER 7.4.3 NR 4.0.9

**URL:** <https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [21 August 2025 12:40 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762 "2025-08-21T12:40:56Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [23 August 2025 13:05 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/21 "2025-08-23T13:05:43Z")

</div>

Just one question.

Raphael is apparently downloaded with Justgage. I can’t seem to see where these paths are derived from.

Looking at File Explorer in node\_modules Raphael and Justgage are in two separate same level directories, and there is no Raphael under Justgage, so how does the ‘tree’ work? Is there some kind of command in Justgage to show where Raphael is?

UIBUILDER libraries only shows Justgage available.

EDIT: Node\_modules in the uibuilder directory

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 August 2025 13:36 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/22 "2025-08-23T13:36:04Z")

</div>

> [@mudwalker](#):
>
> Looking through the Justgage in UIBUILDER thread, from which my original paths were taken, they seem incorrect

Not totally incorrect..

Reading the justgage install guide - [justGage](https://toorshia.github.io/justgage/) says;

“Include JustGage and Raphael scripts in your page.” So was not aware that justgage was actually bundled with Raphael, and I loaded both as separate libraries. Obviously a duplication, but it made life easier because it was easier to determine their paths.

I seem to recall that Justgage is in the root of the Justgage library, and Raphael is in a sub- directory called of course raphael, but I could be wrong.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [23 August 2025 13:53 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/23 "2025-08-23T13:53:12Z")

</div>

> [@Paul-Reed](#):
>
> Obviously a duplication, but it made life easier because it was easier to determine their paths.

I see and understand what you are saying,

I am trying to get my head around this, purely because it is not yet clear. This is the deepest I have been into npm, so you will have to excuse my ‘innocence’ and on getting a grasp on what it happening.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 August 2025 14:16 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/24 "2025-08-23T14:16:20Z")

</div>

It ~~was a~~ is a learning curve for me too, and I've not necessarily got things right, for example a lost of my javascript needs further work to integrate the chart etc into my 'Centralised Message Handling'.

It seems that all the pieces for UIBUILDER are documented & available, but arranging those pieces into the jigsaw is proving hard.  
It would be very useful to have some **very basic** templates to work from, especially for SPA structures, which introduce a number of problem areas for none-professional users.

---

<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 August 2025 15:11 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/25 "2025-08-23T15:11:12Z")

</div>

> [@Paul-Reed](#):
>
> It seems that all the pieces for UIBUILDER are documented & available, but arranging those pieces into the jigsaw is proving hard.

And this is something that needs work for sure. In truth, it isn't really UIBUILDER causing this but the strange life of JavaScript library developers who don't quite seem to be able to get to a solid standard for everyone.

This is why there are caveats in the library manager in uibuilder. There ARE standards for declaring where the top-level entry point is for a library. But not everyone uses them and some people misuse them.

And, using a library from a CDN often has different entry points to when you install it using NPM!

This is also why I just make the whole library's folder structure available to the front-end when you use the library manager to install things. Because it is literally impossible to know where the necessary files might be.

Very frustrating all round. If it makes you feel any better (I won't!), I have the same issues.

> [@Paul-Reed](#):
>
> It would be very useful to have some **very basic** templates to work from, especially for SPA structures, which introduce a number of problem areas for none-professional users.

If you can at least identify some that may be needed, I will work them up for sure.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [23 August 2025 15:27 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/26 "2025-08-23T15:27:22Z")

</div>

As a novice in all this, I am learning all the time, which is one of the things that gets me up in the morning! I have used Julian’s examples to help me along the way, and agree, the information is there, but to me, at times, I have found it confusing, mainly because I want to run before I can walk. Your flows have really helped me a lot in this journey.

Reading the manual is not something I do easily. The problem is, I see an idea and, like a kid, want to run with it, so only me to blame!

I/We are lucky in that people on this Forum with more experience than me/us are ready to help work through our problems. A fact of which I am truly grateful for.

To me, the ‘modern’ programming style seems similar to what I was using back in the 80’s on a far larger scale. Lots of Subroutines to carry out specific tasks called from a main routine. It is just that bigger ‘subroutines’ exist these days. pulled together by a central routine. That is of course if I understand correctly.

---

<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 August 2025 15:58 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/27 "2025-08-23T15:58:58Z")

</div>

> [@mudwalker](#):
>
> As a novice in all this, I am learning all the time

Oh, don't worry, you'll still be doing that many years from now! I certainly am.

> [@mudwalker](#):
>
> To me, the ‘modern’ programming style seems similar to what I was using back in the 80’s on a far larger scale. Lots of Subroutines to carry out specific tasks called from a main routine.

😉 Well don't forget that I was taught my programming skills in the same way. Some things don't stop being good.

> [@mudwalker](#):
>
> It is just that bigger ‘subroutines’ exist these days. pulled together by a central routine. That is of course if I understand correctly.

Yes, things got a lot bigger and more complex, that's for sure. But the central routine thing was there before in most cases - unless you were directly bit-bashing hardware. It just got a bit more complex.

Fun fact, my Dad worked on the first computer at Cadbury's. It was made by Singer (yup, the sowing machine manufacturer!) and was programmed using toggle switches.

Years later, I ended up working on the computers at Cadbury's as well. Except, by then, they were £10m+ worth of IBM mainframes and a room full of tape drives (the big-cupboard sized ones) and hard drives (the ones the size of slightly smaller cupboards). For operations, we used punch cards, magnetic tapes and green-screen cathode-ray tubes. 🤣

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 13:57 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/28 "2025-09-05T13:57:10Z")

</div>

@Paul-Reed Thank you so much for your flow. I have now managed to understand what is happening. 🥳 (Must admit, I had a week off for Grandchild sitting!)

I am now going to apply the same principles to getting @hotNipi web component gauge working in SPA. Editing your flow bit by bit made sure that i knew which parts I needed and which parts I didn’t.

Finally, to get the display I want I will have to resurrect my css knowledge! But that is just another journey without too much complication - just a few cul-de-sacs!!

---

<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:** [5 September 2025 14:19 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/29 "2025-09-05T14:19:33Z")

</div>

Just been mucking about with ObervableHQ Plot on my new weather page and starting to try and work with Apache ECharts which D2 is switching to. Both work though both are somewhat different in their approaches and have different strengths and weaknesses. I have some example code based on data from OWM if you need to look at it.

I note that ECharts has some decent gauges in it BTW.

And, if you have any issues with the web component version of hotnipi's gauge, hit me up, I'm sure there are plenty of improvements that could be made.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [5 September 2025 14:33 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/30 "2025-09-05T14:33:56Z")

</div>

> [@mudwalker](#):
>
> Thank you so much for your flow. I have now managed to understand what is happening

I'm in the process of tidying it up, and removing surplus code, and have updated my git repo accordingly. If you find improvements, or better ways of doing things, please let me know, as I'm on the learning curve too 😅

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 14:56 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/31 "2025-09-05T14:56:33Z")

</div>

> [@Paul-Reed](#):
>
> as I'm on the learning curve too 😅

:lol Of course I will, but to be honest, you are one of the people I follow on here to help me get my stuff working! I will certainly have a look once you are happy with the code.

Having said that, I am still getting to understand/comprehend completely your script. I understand, but need to comprehend so that I can create my own stuff, and as I get older, the comprehending bit becomes harder! But you have literally saved me weeks/months. I need to get my (very old) Javascript and css books out! (Or possibly get some new ones!)

@TotallyInformation I did get hotNipi’s gauge working, but in tidying up, I did the inevitable of deleting the working one (Static Page). At the moment I have a couple of errors that I am working through -

```auto
Uncaught SyntaxError: Unexpected identifier 'template' (at hotnipi-gauge.js:18:51)
index.js:6 Uncaught SyntaxError: Unexpected token 'if' (at index.js:6:26)

```

I know I got it working, but not sure which source - Forum or Web Component page.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 15:08 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/32 "2025-09-05T15:08:18Z")

</div>

At the moment, I am happy passing an embedded Grafana graph into the SPA site, but once I get that to 90%, maybe, possibly, I might progress to this…

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [5 September 2025 15:08 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/33 "2025-09-05T15:08:30Z")

</div>

I usually ask chatGPT ‘why am I getting a Uncaught SyntaxError: Unexpected identifier 'template' (at hotnipi-gauge.js:18:51) error in the code below.’

….and then paste the whole JavaScript code.

Same with the index.js error

AI normally quickly identifies the error

---

<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:** [5 September 2025 15:31 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/34 "2025-09-05T15:31:36Z")

</div>

> [@mudwalker](#):
>
> I need to get my (very old) Javascript and css books out! (Or possibly get some new ones!)

😃 I just constantly rely on MDN to remind me about all the functions and API's.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 15:33 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/35 "2025-09-05T15:33:18Z")

</div>

I am afraid that the language in MDN is not the simplest, but once you have the idea, it can help a lot!

---

<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:** [5 September 2025 15:44 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/36 "2025-09-05T15:44:33Z")

</div>

> [@mudwalker](#):
>
> not the simplest

If I don't understand the language or, more likely, a term, I will look that up more generally to get a different view. ChatGPT can help there.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 15:51 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/37 "2025-09-05T15:51:17Z")

</div>

OK, I have found where my problem is.

If I open the Node `hotnipi-gauge.js`on the working flow in SPA (no values are transferred due to SPA method) and CTRL-C to copy the code, then CTRL-V into flow of the static page in UIBUILDER I see errors (Javascript set as language in both). If I do exactly the same but RIGHT CLICK and copy, then go to Static page and RIGHT CLICK paste, I get no errors and the flow works OK (same with index.js). This was in Vivaldi, I will try Brave and Firefox, although Firefox is starting to go out of favour with me with it’s integrated changes including AI etc. despite being an early adopter!!

@Paul-Reed Chat GPT showed me where the error was 👍 , but of course it couldn’t account for this syntax error!!

---

<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:** [5 September 2025 16:31 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/38 "2025-09-05T16:31:52Z")

</div>

Sorry, you've lost me with your explanation 😃

I've not jumped in because I thought you may want to sort it yourself. If you want some more help though, you probably need to share some code and the errors. Happy to help if you want it.

---

<div class="post-metadata">

**Author:** ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)\
**Post date:** [5 September 2025 16:47 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/39 "2025-09-05T16:47:56Z")

</div>

It’s a copy and paste problem _ **with the Browser!** _

CTRL-A, Ctrl-C and CTRL-V from the Node Editor box to another flow and the code format is corrupted.

CTRL-A, RIGHT CLICK and Copy, then RIGHT CLICK and Paste into another flow and all is OK.

Or at least, that is what is now working for me.

(hotnipi-gauge.js)

---

<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:** [5 September 2025 17:52 UTC](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762/40 "2025-09-05T17:52:49Z")

</div>

Do you have any browser extensions installed? Or something at the OS level that interferes? (AutoHotKey or something else?) Or do you have a sticky key?

I've done that kind of thing fairly regularly so it should be fine. I use Vivaldi on Windows 11.

[Previous page](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762.md?page=1)

[Next page](https://discourse.nodered.org/t/trying-to-load-npm-package-justgage-into-uibuilder-7-4-3-nr-4-0-9/98762.md?page=3)