We have an application using uibuilder and react working perfectly since 2 years now. we have recently updated the node red entire packages and with that also the Uibuilder node going from version 2.0.8 to the latest 4.1.4.
all reatct application and everything is the same no changes on that.
the react dashboard starts correctly, however we are facing now a coomunication problem apparently due to socket IO error
this when the following function is called from the app.react.js application.
'''
let interval = setInterval(() => {
console.log(uibuilder.get('ioConnected'))
if (uibuilder.get('ioConnected')) {
setConnected(true)
clearInterval(interval)
}
'''
in this process we have backed-up and restored the .node-red/project folder so to keep the actual react working deployement. we are therefore using the new node red version 2.1.3 and uibuilder 4.1.4.
we have check all related topics and also applied some of the proposed changes to similar problems.
we have also tried to downgrade the socket.io to the previous 2.3.0 version (both server and client) but no changes, same error.
There could be something related to the uibuilder calls to be changed from version 2.0.8 to 4.1.4?
You don't actually show an error there? Is it that the socket.io client isn't loading? Or that it isn't communicating?
You have jumped 2 major releases so you probably need to open the uibuilder node(s) and just check the settings are correct then click "Done" and, if needed, do a deploy.
I can't see anything in the past changelogs that would indicate that anything changed in respect to the socket.io client.
In regard to your code, it can be simplified because ioConnected uses uibuilderfe's event system and so changes to it can be listened for using uibuilder.onChange('ioConnected', function(ioConnected) { ...}.
The other thing you can do is to set the debug flag as early as possible in your app code with uibuilder.debug(true), that can be set before calling the start function. If you could then share some more of the output and also check the network tab in dev tools to show whether the socket.io client library is being found and whether the socket connection is successfully getting an upgrade (look for a line with a status code of 101).
You shouldn't be specifying that anywhere, the socket.io client adds that itself.
What that indicates to me is that you are using the wrong version of the socket.io client. I suspect that you may have bundled the client in your app bundle? I generally recommend avoiding that for this very reason - that it is easy for the client version to get out of step with the server.
When v5 comes out (and I recommend that you do some tests with the GitHub vNext branch), you will find that I've actually had to include the separate dependency of the socket.io-client npm package because I've realised that the client version included with the server isn't suitable for some use-cases.
I have checked the versions and dependencies, we didnt have bundled it, we just use the standard node-red installation that is now updated to 2.1.3.
we use the projects configuration so initially in the target we have restored just the node red flow, re-deploying the complete uibuilder/react component. getting problems this way, we have then tried backing up and restoring the complete project/uibuilder structure.
trying now we a fresh reinstall of everything and test again
After a complete re-deploy, got the same socket.io problem and also another one related to the uibuilderfe. that could be however related to the same socket error.
i have also found the socket.io-client not present under node-red installation and manually added at version 4.4.1, however same problems.
so from the installation point of view everything seems correct.
need to check now the react environment deployement (uibuilder dir) that we make automatically from the repo
Could you please check the network tab to see if it has found it at all? If it has found it, can you please click on the entry and go to the preview tab and let me know what the comment at the top says?
The initiator view is also quite helpful.
In this case, I am using vNext with an experimental module version of the uibuilderfe client.
That is correct for uib v4, it will be different in v5.
In your code, are you loading the socket.io library in the HTML or are you doing it in your app js code?
Because we need to understand why the client is trying to connect using EIO 3 rather the EIO 4 as it should be.
That should only be needed if you are serving the front-end web pages from a server that is different to the built-in one or if you aren't using a script that is in the root folder being served (presumably you are serving from the dist folder as you are using REACT and will need to have run a build. So if your startup js is in a file in dist/, you shouldn't need the extra settings.
If you take those out, what debug messages do you get?
In previous deployement we have the dist folder, actually i only see the src one, dont know exactley why because first deployement has been done 2 yrs ago ...
i could not find that socket.io elements is that chrome debugger?
If you cannot see a separate line for socket.io, it means that you are not loading it separately. That in turn means that you ARE loading it as part of your bundle. And that is the issue, you still have an old version of the client which is being used and is using EIO 3 instead of 4.
You need to track down where the socket.io client is being bundled and replace it. Or better still, remove it from the bundle and load it as per the uibuilder template index.html.
Nope, that isn't anything to do with uibuilder I'm afraid! That is down to your own REACT code.
I keep saying this but it seems I keep getting ignored. I don't believe it is a good idea to include uibuilderfe and the socket.io client in your bundle code. At least not unless you have a process in place to review every release of uibuilder.
uibuilder serves up both of those libraries in a way that means you don't have to worry about them. If you decide to bundle them, you are responsible for maintaining them.
Yep, i fully agree, this way seems quite tough to manage, unfortunately i didnt design it originally .... just trying to update and working .. i do not fully understand why uibuilder is inside react part ..
