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

**URL:** <https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [10 May 2022 17:53 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470 "2022-05-10T17:53:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob69](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@noob69](https://discourse.nodered.org/u/noob69)\
**Post date:** [10 May 2022 17:53 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470/1 "2022-05-10T17:53:46Z")

</div>

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.

```auto

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)

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 May 2022 18:46 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470/2 "2022-05-10T18:46:11Z")

</div>

Are you using uibuilder v5.x? If so, you certainly don't need to install the [socket.io](http://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.

---

<div class="post-metadata">

**Author:** ![noob69](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@noob69](https://discourse.nodered.org/u/noob69)\
**Post date:** [11 May 2022 02:51 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470/3 "2022-05-11T02:51:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 May 2022 08:38 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470/4 "2022-05-11T08:38:38Z")

</div>

> [@noob69](#):
>
> 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.

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](http://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?

> [@noob69](#):
>
> ..\user\uibuilder\node\_modules\socket.io\client-dist.socket.io.min.js

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

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

```

or

```auto
../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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 July 2022 08:39 UTC](https://discourse.nodered.org/t/uncaught-referenceerror-io-is-not-defined-error-getting-in-reactjs-app-with-node-red-uibuilder-backend/62470/5 "2022-07-10T08:39:25Z")

</div>

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