# Uibuilder vue3 example: TypeError: Class extends value undefined is not a constructor or null

**URL:** <https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [23 June 2022 06:38 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264 "2022-06-23T06:38:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![skipware](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@skipware](https://discourse.nodered.org/u/skipware)\
**Post date:** [23 June 2022 06:38 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/1 "2022-06-23T06:38:55Z")

</div>

I followed the instructions here:  
[[Basic Vite Vue 3 TypeScript App · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Basic-Vite-Vue-3-TypeScript-App)]([https://Basic](https://Basic) Vite Vue 3 TypeScript App)

After going through the build phase successfully I get the following error in the browser:

`Uncaught TypeError: Class extends value undefined is not a constructor or null at index.7bcc2a8d.js:28:16221`

and I'm stuck here.

earlier trouble shooting steps:

`Uncaught ReferenceError: io is not defined`  
solved by adding as first line to src/main.ts  
`import 'socket.io'`

then I got:  
`Uncaught ReferenceError: Buffer is not defined`  
which I solved by adding this to index.html

```auto
    <script type="module">
      import { Buffer } from 'buffer'
      window.Buffer = Buffer
    </script>
  </head>

```

I am running:  
node: v16.14.2  
uibuilder v5.0.2  
vue 3.2.37  
vite 2.9.12

Hope you can help, bit stuck

---

<div class="post-metadata">

**Author:** ![skipware](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@skipware](https://discourse.nodered.org/u/skipware)\
**Post date:** [23 June 2022 06:55 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/2 "2022-06-23T06:55:59Z")

</div>

a bit more info:  
I installed uibuilder from the palette manager.  
I also needed to change this line in uibuilderPlugin.ts

```auto
from:
import uibuilder from 'node-red-contrib-uibuilder/front-end/src/uibuilderfe.js'
to:
import uibuilder from 'node-red-contrib-uibuilder/front-end/uibuilderfe.js'

```

and similar in vite.config.ts

I did not load socket.io-client or [socket.io](http://socket.io) (I specified import '[socket.io](http://socket.io)' in main.ts, note that if [socket.io](http://socket.io) was not used I received an error in the browser `io is not defined` )

---

<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:** [23 June 2022 08:45 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/3 "2022-06-23T08:45:36Z")

</div>

OK, so I can see then that you are using the current version of uibuilder and yes, the location of the front-end client moved up a folder because the source code is now in a different place and goes through a build process.

> [@skipware](#):
>
> I followed the instructions here

Actually, I didn't write that WIKI entry and I don't use TypeScript so I may be of limited help.

> [@skipware](#):
>
> Uncaught ReferenceError: io is not defined

So in v5.0.2, uibuilder includes an install of socket.io-client and you should import that in order to include io before the uibuilder client is imported.

Please do feel free to update the WIKI article with any corrections.

* * *

By the way, in the next release, a new client will be introduced. I've just been testing with Vue2 and Vue3. That new client has the [socket.io](http://socket.io) client baked in so you won't have to bother with it. In addition, it has a specific ESM version which should work well with Vite (not tested yet) and TS. The old client will still be there but probably won't get any more updates.

---

<div class="post-metadata">

**Author:** ![skipware](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@skipware](https://discourse.nodered.org/u/skipware)\
**Post date:** [24 June 2022 01:30 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/4 "2022-06-24T01:30:54Z")

</div>

I continue to get this error in the browser:

```auto
unncaught TypeError: Class extends value undefined is not a constructor or null
    at index.ea63da2d.js:28:16265

```

npm reports this for the [socket.io](http://socket.io) libs:

```auto
nr1@s02591:~/.node-red> npm list socket.io-client
node-red-project@0.0.1 /home/nr1/.node-red
└─┬ node-red-contrib-uibuilder@5.0.2
  └── socket.io-client@4.5.1

nr1@s02591:~/.node-red> npm list socket.io
node-red-project@0.0.1 /home/nr1/.node-red
└─┬ node-red-contrib-uibuilder@5.0.2
  └── socket.io@4.5.1

```

within main.ts:

```auto
import 'socket.io' // if not included browser throws ReferenceError: io is not defined at o.ioSetup (index.48ae3d31.js:10:3278)
import 'socket.io-client' // this make no difference
import { createApp } from 'vue'
import App from './App.vue'
import uibuilderPlugin from './plugin/uibuilderPlugin';

```

am I not loading the socket.io-client you expect?

---

<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:** [24 June 2022 04:36 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/5 "2022-06-24T04:36:45Z")

</div>

Hi, Try adding this to your index.html file

` <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>`

---

<div class="post-metadata">

**Author:** ![skipware](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@skipware](https://discourse.nodered.org/u/skipware)\
**Post date:** [24 June 2022 07:28 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/6 "2022-06-24T07:28:43Z")

</div>

note that I do the build step which uses vite, the ui builder is pointed to dist in the advanced tab.

you do use [socket.io](http://socket.io) in your example template shipped with uibuilder  
[socket.io](http://socket.io) was made compatible with vite since 4.3.0:  
`https://socket.io/blog/socket-io-4-3-0/`

I came across this page re [vue-socket.io](http://vue-socket.io).. should we be using that for our vue builds?  
`https://stackoverflow.com/questions/69036084/using-socket-io-client-with-vite-js-vue#`

---

<div class="post-metadata">

**Author:** ![skipware](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@skipware](https://discourse.nodered.org/u/skipware)\
**Post date:** [24 June 2022 07:30 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/7 "2022-06-24T07:30:28Z")

</div>

Hi @noob69  
Yes I did try that but that fails at the build step as vite is not aware of the express path uibuilder/vendor/.....

---

<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:** [24 June 2022 07:57 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/8 "2022-06-24T07:57:49Z")

</div>

` <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>` should work if your build path is src of the Ui builder vue example. Where did you build your project?

---

<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:** [24 June 2022 08:16 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/9 "2022-06-24T08:16:18Z")

</div>

> [@skipware](#):
>
> this page

Is marked as dangerous by my security software so I won't be looking at that I'm afraid.

> [@noob69](#):
>
> `<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>` should work if your build path is src of the Ui builder vue example. Where did you build your project?

That should indeed work as long as you remove the import from your source code.

You might note these comments at the start of the uibuilderfe.js source code:

```auto
/** Tell Webpack/Parcel that we need socket.io client if running from webpack build
 * For this to work, you have to have the socket.io-client package installed as a dev
 * dependency in your front-end project.
 * ! NOTE: It is preferable NOT to bundle the socket.io client since there is a danger
 * ! that you will end up with an incompatible version. You gain little to nothing anyway.
 */
if (typeof require !== 'undefined' && typeof io === 'undefined') { // eslint-disable-line block-scoped-var, no-use-before-define
    const io = require('socket.io-client') // eslint-disable-line no-unused-vars
}

```

The uibuilderfe client library wasn't really designed for passing through a build step. Others have contributed changes to that library over the years to try and make it usable.

You need to note that when doing a build step, the import references are relative to your build process (generally should be the instance root folder) and not relative to the uibuilder root folder, the node-red root folder or any other location. So if doing an import for Vite, you need to give Vite a clue as to where the socket.io-client library lives. Or, as stated in the comments, you need to install the socket.io-client library into the instance root - the same folder that the package.json file for your instance of the uibuilder node. E.g. a uibuilder node instance with a url set to `mytest` might be at `~/.node-red/uibuilder/mytest`.

* * *

Please note that the next release of uibuilder, v5.1 will have a new front-end client library that has two formats, an ESM format which should be ideal for this and an IIFE format which you can use in the same way as the current library (e.g. load it via a script tag). However, there are some breaking changes with the new client library and it only works in modern (2019+) browsers.

---

<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:** [23 August 2022 08:16 UTC](https://discourse.nodered.org/t/uibuilder-vue3-example-typeerror-class-extends-value-undefined-is-not-a-constructor-or-null/64264/10 "2022-08-23T08:16:43Z")

</div>

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