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

General
1

I followed the instructions here:
[Basic Vite Vue 3 TypeScript App · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub](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

    <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

2

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

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 (I specified import 'socket.io' in main.ts, note that if socket.io was not used I received an error in the browser io is not defined )

3

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.

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

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 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.

4

I continue to get this error in the browser:

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 libs:

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:

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?

5

Hi, Try adding this to your index.html file

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

6

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 in your example template shipped with uibuilder
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.. should we be using that for our vue builds?
https://stackoverflow.com/questions/69036084/using-socket-io-client-with-vite-js-vue#

7

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

8

<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?

9

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

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:

/** 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.

1 Like
10

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