" Uncaught ReferenceError: io is not defined error " getting in reactjs app with node-red uibuilder backend

General
1

I'm getting Uncaught ReferenceError: io is not defined error when running a reactjs app with the node-red ui builder backend. I've configured nodeserver in index.html but the error keeps getting thrown.
my index.html configuration.

<script src="http://localhost:1880/reactapp/socket.io/socket.io.js"></script>

Above nodered uibuilder server is up and running. And I've already installed the socket.io package.

The console is showing the following message.


uibuilderfe.js:411 Uncaught ReferenceError: io is not defined
    at Object.ioSetup (uibuilderfe.js:411:1)
    at Object.start (uibuilderfe.js:1635:1)
    at new UserData (UserData.js:18:1)
    at constructClassInstance (react-dom.development.js:13522:1)
    at updateClassComponent (react-dom.development.js:20497:1)
    at beginWork (react-dom.development.js:22440:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
2

Are you using uibuilder v5.x? If so, you certainly don't need to install the socket.io client. It is already installed.

Most likely, the library file wasn't found at the URL you specified - look for 404 errors in the network tab of the dev tools.

http://localhost:1880/reactapp/socket.io/socket.io.js isn't a location that uibuilder will serve a library from unless you have manually put the library in <uibRoot>/reactapp/socket.io/socket.io.js. The old location for the client library would be http://localhost:1880/uibuilder/vendor/socket.io/socket.io.js.

Better still though, use the actual client library which uibuilder also installs and lets you use the minified version as well ../uibuilder/vendor/socket.io-client/socket.io.min.js (as a relative URL in your HTML).

Details in the CHANGELOG for v5.0.0 and in the docs.

3

Hi, I've tried adding ..\user\uibuilder\node_modules\socket.io\client-dist.socket.io.min.js but issue is still there. I'm trying this with the react WIKI example that you have created in the github. I'm pretty new to react and nodered ui builder.

4

Ah, OK. That explains things a bit more. The original example was written with uibuilder v1 and we are now on v5. I don't use REACT so unless someone provides an updated example, I don't tend to update them. Thankfully, someone contributed an update last year but that would have been for uibuilder v4. In fact, I can't see how he is accessing Socket.IO.

What I would say is REACT is quite complex to use. Unless you are already familiar with web development, you might want to start with something a bit simpler?

That is a filing system path not a URL path. The URL is:

../uibuilder/vendor/socket.io-client/socket.io.min.js

or

../uibuilder/vendor/socket.io/socket.io.js

The .. at the start tells your browser to start from the URL path that the main page is loaded at: http://localhost:1880/reactapp/ in your case, then to go up 1 level to http://localhost:1880/.

Then it adds the rest of the URL to get http://localhost:1880/uibuilder/vendor/socket.io/socket.io.js.

I give you that because if you start to use pages from sub-folders, you need to adjust the URL accordingly. So a page served at http://localhost:1880/reactapp/test/ would need the url's adjusting to have ../../ at the start which takes the path up 2 levels. Hopefully, you won't be doing that at the start though. Try to keep things simple to begin with.

Also, never forget that you can always add another uibuilder node to your flow as a test. All of the correct URL's and code are in the default template.

1 Like
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.