# Uibuilder App Vue work fine in Firefox but not in Chrome

**URL:** <https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [3 November 2023 13:31 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578 "2023-11-03T13:31:34Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![serinmo](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@serinmo](https://discourse.nodered.org/u/serinmo)\
**Post date:** [3 November 2023 13:31 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/1 "2023-11-03T13:31:34Z")

</div>

Hi,

I've a app vue to dynamic change a svg fill colors that work fine in Firefox but in Chrome it doesn't work:

websocket.js:121 WebSocket connection to 'ws://-----------------.es:1881/uibuilder/vendor/socket.io/?EIO=4&transport=websocket&sid=jlnC2iuICG6DAFrQAABw' failed: WebSocket is closed before the connection is established.

uibuilderfe.min.js:1 [uibuilderfe:ioSetup:connect\_error] SOCKET CONNECT ERROR - Namespace: /xxxxxx, ioPath: /uibuilder/vendor/socket.io, Reason: Invalid namespace Error: Invalid namespace  
at Socket.onpacket (socket.js:466:29)  
at Emitter.emit (index.mjs:136:20)  
at manager.js:204:18

Any idea?

---

<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:** [3 November 2023 15:45 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/2 "2023-11-03T15:45:08Z")

</div>

> [@serinmo](#):
>
> Invalid namespace

> [@serinmo](#):
>
> /xxxxxx

So the issue is that the uibuilder client library cannot work out the correct namespace. The namespace should generally be the uibuilder URL prefixed with a forward slash.

So if your uibuilder url is `test`, the namespace should be `/test`.

Unfortunately, you are using the old client library and so you have to manually pass the namespace to the `uibuilder.start` function which you have to call in your Vue startup or mounted function.

If you switch to using the new `uibuilder.iife.min.js` library version, you don't need to call the start function as it works out the namespace much more reliably for itself.

---

<div class="post-metadata">

**Author:** ![serinmo](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@serinmo](https://discourse.nodered.org/u/serinmo)\
**Post date:** [3 November 2023 16:30 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/3 "2023-11-03T16:30:29Z")

</div>

Thanks,

It doesn't updated at the same time that uibuilder node ?

I update the library manually, but the problem is the same

In Firefox it works well but it show this:  
[uibuilderfe:ioSetup:client-connect] Server version (6.6.0) not the same as the client version (6.5.0-old)

---

<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:** [3 November 2023 18:11 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/4 "2023-11-03T18:11:13Z")

</div>

> [@serinmo](#):
>
> It doesn't updated at the same time that uibuilder node ?

No, clearly stated in [various parts of the documentation](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/readme) that the `uibuilderfe` library is no longer under development and you should move over to the newer library. However, note that there are some [breaking differences](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/readme?id=what-was-removed-compared-to-the-older-non-module-version) (also you can remove `uibuilder.start()` and you need to check your various links in your html as some of the paths have changed) that you need to take into account when doing so.

The new library is a lot more consistent and has many newer features. It is also a lot more robust than the old library.

> [@serinmo](#):
>
> [uibuilderfe:ioSetup:client-connect] Server version (6.6.0) not the same as the client version (6.5.0-old)

Don't worry about that - I only spotted that myself today, it is a minor issue in the last release. It has no impact on code.

Can you please share your html and js files (create simple ones if your live ones are complex). Also, could you please create a test uibuilder node set to use the blank Vue template. See if that has the same issue?

And finally, what version of VueJS are you using and is it locally installed (via the uibuilder library manager) or from a CDN (over the Internet)?

Thanks.

---

<div class="post-metadata">

**Author:** ![serinmo](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@serinmo](https://discourse.nodered.org/u/serinmo)\
**Post date:** [5 November 2023 13:53 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/5 "2023-11-05T13:53:21Z")

</div>

Hi again, I started the proyect form blank template wich include new library. Now it doesn't any problem with Chrome, but the vue component doesn't work.

This is my vue app, but I don't know how to chage it to use the new Library.

```auto
Vue.component("App7", {
    template: `<div id="app7">

SVG PATH ...

<\div>
`,
   data() {
      return {

        // attributes grouped into styles
        appStyle: {
          backgroundColor: '#ffffff'
        },
        valve1Style: {
              fill: '#e15649',
        },
        valve2Style: {
              fill: '#e15649',
        },
        valve3Style: {
              fill: '#e15649',
      },
      };
   },
   computed: {
   },
   mounted: function () {
      uibuilder.start();
      var app = this;

      uibuilder.onChange('msg', function (msg) {
          app.valve1Style.fill = msg.payload.valve1;
          app.valve2Style.fill = msg.payload.valve2;
          app.valve3Style.fill = msg.payload.valve3;
      });
   },
});

```

---

<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:** [5 November 2023 14:17 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/6 "2023-11-05T14:17:35Z")

</div>

> [@serinmo](#):
>
> the vue component doesn't work

What errors are you getting?

Also, your Vue components should not try to do `uibuilder.start()`, this is only required once early in the load process. In any case, start is run for you when the uibuilder client library is loaded, you no longer need to run it unless you are trying to use a 3rd-party dev server (and in that case, you have to pass some parameters).

---

<div class="post-metadata">

**Author:** ![serinmo](https://avatars.discourse-cdn.com/v4/letter/s/7ab992/32.png) [@serinmo](https://discourse.nodered.org/u/serinmo)\
**Post date:** [6 November 2023 19:10 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/7 "2023-11-06T19:10:31Z")

</div>

Sorry, the probem was mine, I did all from the beginim with the new library and all works fine.

Thanks

---

<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:** [6 November 2023 19:48 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/8 "2023-11-06T19:48:00Z")

</div>

No problem. Glad you got it working. There shouldn't be another big change to the front-end library now since the newer library is a much better and more flexible structure.

---

<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:** [20 November 2023 19:48 UTC](https://discourse.nodered.org/t/uibuilder-app-vue-work-fine-in-firefox-but-not-in-chrome/82578/9 "2023-11-20T19:48:46Z")

</div>

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