node-red-contrib-uibuilder: cant find the io-dependency

Hi,

my problem, i can’t find the right path for the io-dependency. I have try the example from https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS without and with project, but both approches have the same problem with the io-dependency.

Software	Version
Node.JS	v16.14.0
npm	8.15.1
Node-RED	v3.0.1
uibuilder node	5.1.1
uibuilderFE	5.1.1
OS	Ubuntu 20.04
Browser	Firefox 108.0

How is Node-RED installed? Where is uibuilder installed?

16 Dec 07:48:02 - [info] Settings file : ~/.node-red/settings.js 16 Dec 07:48:02 - [info] Context store : ‘default’ [module=memory] 16 Dec 07:48:02 - [info] User directory : ~/.node-red 16 Dec 07:48:02 - [info] Projects directory: ~/.node-red/projects 16 Dec 07:48:02 - [info] Server now running at http://127.0.0.1:1880/ 16 Dec 07:48:02 - [info] Active project : testproject 16 Dec 07:48:02 - [info] Flows file : ~/.node-red/projects/testproject/flows.json 16 Dec 07:48:02 - [info] ±---------------------------------------------------- 16 Dec 07:48:02 - [info] | uibuilder v5.1.1 initialised 16 Dec 07:48:02 - [info] | root folder: ~/.node-red/projects/testproject/uibuilder 16 Dec 07:48:02 - [info] | Using Node-RED’s webserver at: 16 Dec 07:48:02 - [info] | http://0.0.0.0:1880/ 16 Dec 07:48:02 - [info] | Installed packages: 16 Dec 07:48:02 - [info] | react 16 Dec 07:48:02 - [info] ±----------------------------------------------------

uibuilder.start({
            namespace: "http://127.0.0.1:1880/react_ui", 
            ioPath: "http://127.0.0.1:1880/uibuilder/vendor/socket.io"
        });

can you please help me?

cheers Patrick

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 24 (12 by maintainers)

Most upvoted comments

Thank you for your time! 😃

foreversun69 on Dec 21, 2022

OK, I think I’ve probably confused things rather than helping. I don’t use REACT so I’m not really familiar with the tools. Let me follow the WIKI example and see if I can get things working.

A “build step” is sometimes (wrongly) referred to as a “compile”. I takes your source code and processes it to a built version ready to run. Along the way, it may do things like pull multiple files into a single js file and convert from newer to older versions of JavaScript.

One of the confusions here is about the import statement. Natively, browser JavaScript only supports this for ES Modules which only work in modern browsers. Your build step however allows import and works out how to combine the external files into your output file so that it works with older browsers. I do something similar with the new uibuilder libraries where I use a build tool called ESBUILD which, among other things, locks in the socket.io client.

Bear with me while I do some testing.

TotallyInformation on Dec 21, 2022

Are you still using the old uibuilderfe client? If so, I’m afraid you do need to still have the reference to the socket.io client in your HTML. Only the new clients (recommended) don’t need it.

for the new clients, the html is:

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed  -->
    <script src="./uibuilder.iife.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
    <script src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

For the old client:

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <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="./index.js">/* OPTIONAL: Put your custom code here */</script>
    <!-- #endregion -->

Plus whatever other libraries you need of course.

I’m just re-doing all of the templates and examples for a post v6.0 release.

TotallyInformation on Dec 20, 2022