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

[foreversun69]

Thank you for your time! 😃

[TotallyInformation]

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.