Uibuilder can't find jQuery

While running some example scripts with uibuilder I am getting an error in the Chrome console;

GET http://127.0.0.1:1880/uibuilder/jquery/dist/jquery.min.js net::ERR_ABORTED 404 (Not Found)

I do have jquery installed in node js;

$ find . -name jquery* | grep js
./node_modules/jquery/src/jquery.js
./node_modules/jquery/dist/jquery.slim.min.js
./node_modules/jquery/dist/jquery.slim.js
./node_modules/jquery/dist/jquery.min.js
./node_modules/jquery/dist/jquery.js

I am operating this under WSL. How would node-red normally find out about where to find the jquery.min.js file?

Hi, for a library to be made available via uibuilder itself, it has to be installed to the uibuilder root folder. This, by default is ~/.node-red/uibuilder but can be moved by config if desired.

The easiest way to make sure it is in the right place is to install it via the uibuilder library manager tab.

If you have jQuery installed elsewhere, you will need to work out how it is served up - for example, you could use node-red's public folder.

If you open any uibuilder main node, you will also see a link that lets you see everything that is served up by uibuilder.

image

Thank you for that response. I have managed to get it operating, but not using the uibuilder library manager - I had a few hiccups there;

using the library manager, "jquery.min.js" installs version 3.5.1 and gives the the address of
./uibuilder/vendor/jquery.min.js/?
and installs it in
./uibuilder/node_modules/jquery.min.js

using simple "jquery" installs version 3.7.1 and gives the address
./uibuilder/vendor/jquery/?
and installs it in
./uibuilder/node_modules/jquery/dist/jquery.js

but these locations the files have been put in don't appear to work with a link. I can install the jquery.min.js in the src folder, and change link in the index.html file. Just not sure what I'm missing here.

Hi, I've just done an install of jquery using the library manager, this is what I got:


image

The estimated link comes from what the package author has set in package.json, uibuilder has no control over that which is why it is an "estimated" link. But in this case, you you need is to adjust that to ../uibuilder/vendor/jquery/dist/jquery.min.js - you can check that you are getting the right thing by clicking on the provided link and adjusting as needed.

Trying to install "jquery.min.js" is not going to be right because that isn't the package name. Check on npmjs.org for the correct package names.

What you are missing is letting uibuilder do the hard work for you. When you install via the library manager, uibuilder makes the whole folder accessible to your front end. Not terribly useful in the case of jQuery though you may note that it also has a "slim" version. But useful where a package may also provide ancillary resources such as images and styles.

Sadly, there is no robust, standardised way of knowing how a 3rd-party package has been packaged up when working with front-end packages and libraries. So uibuilder has to do what it can.

Bottom line is that you should remove other instances of jQuery and simply install "jquery" via the library manager then use ../uibuilder/vendor/jquery/dist/jquery.min.js or ../uibuilder/vendor/jquery/dist/jquery.slim.min.js as required.

Note that if you wish to use jQuery's $ shortcut references, you should link to it before you link to the uibuilder client library. That way, the uibuilder library won't take over the $ function.

In my case the install is the same, but the Est. link is

but the ACTUAL jquery.min.js file (and the other jquery files) are in;

./uibuilder/node_modules/jquery/dist

My index files are in;

./uibuilder/test5/src

I may be imposing my ignorance of NodeJS here, but I don't know how to have index.html find the jquery.min.js file considering where it's been installed.

Note:

but

<script defer src="../../node_modules/jquery/dist/jquery.min.js"></script>
(or similar combinations tried)

does not allow index.html to find jquery.min.js

You are mixing up the local file locations with the server URL's.

The correct location is ../uibuilder/vendor/jquery/dist/jquery.min.js

Looking over your first post, I utilized node-red's public folder, which resolved my issue.

Thank you for your help.