Hi,
I have some errors with the new uibuilder..
Just a word of warning, I sense this is gonna be a long thread.
To get started:
These are my current specs:
27 Apr 07:02:08 - [info] Node-RED version: v3.0.2
27 Apr 07:02:08 - [info] Node.js version: v18.16.0
27 Apr 07:02:08 - [info] Windows_NT 10.0.19045 x64 LE
27 Apr 07:02:28 - [info] | uibuilder v6.4.0 initialised
uib packages:
|apexcharts|3.35.0|../uibuilder/vendor/apexcharts/
|bootstrap|5.1.3|../uibuilder/vendor/bootstrap/
|bootstrap-vue|2.21.2|../uibuilder/vendor/bootstrap-vue/
|http-vue-loader|1.4.2|../uibuilder/vendor/http-vue-loader/
|jquery|3.6.0|../uibuilder/vendor/jquery/
|normalize.css|8.0.1|../uibuilder/vendor/normalize.css/
|vega|5.22.1|../uibuilder/vendor/vega/
|vega-embed|6.20.8|../uibuilder/vendor/vega-embed/
|vue|2.6.14|../uibuilder/vendor/vue/
|vue-apexcharts|1.6.2|../uibuilder/vendor/vue-apexcharts/
|vue-router|3.5.3|../uibuilder/vendor/vue-router/
As I've gotten pretty far with my dashboard, I'm not feeling like redo it it some other platform/library/package or anything...
So, VueJS2, vue-router and httpVueLoader
Right, so, as I started this project last year, then abandoned it to do something else, It was only logical to continue when I stopped. But software moved on in this 1 year.
Now, to make things short:
- I am using updated software with last-year code (except for the index.html)
- When I use it like that (1) there are numerous errors on the console, and redoind routing 3-6 times at one press of a button
- When I get back the old index.html, everything works as intended
- I tried using new index.js file with "toasts", but as there is no example how to do it without errors and with using the proper vue-routing to jump from vue component to vue component, I gave up and figured this is waaay complicated I hoped it will be
"old" index.html which works:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FREYA 0.4.2alpha</title>
<link rel="icon" href="./resources/viking.png">
<!--<link rel="icon" href="./images/node-blue.ico">-->
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head>
<body>
<div id="app" class="selector" v-cloak><!-- All UI code needs to be in here -->
<Navbar></Navbar>
<div class="sbar">
<router-view></router-view>
</div>
</div>
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script src="../uibuilder/vendor/socket.io/socket.io.js">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
<!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script> -->
<script src="../uibuilder/vendor/vue/dist/vue.js">/* dev version with component compiler */</script>
<!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* prod version */</script> -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js">/* dev version */</script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
-->
<script src="../uibuilder/vendor/vega/build/vega.js"></script>
<script src="../uibuilder/vendor/vega-embed/build/vega-embed.js"></script>
<script src="../uibuilder/vendor/apexcharts/dist/apexcharts.js"></script>
<script src="../uibuilder/vendor/vue-apexcharts/dist/vue-apexcharts.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
-->
<script src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
<script src="../uibuilder/vendor/vue-router/dist/vue-router.js"></script>
<script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
<script src="./index.js">/* OPTIONAL: Put your custom code here */</script>
<!-- #endregion -->
</body>
</html>
"New" index.html which produces unwanted behaviour:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FREYA 0.4.2alpha</title>
<link rel="icon" href="./resources/viking.png">
<!--<link rel="icon" href="./images/node-blue.ico">-->
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head>
<body>
<div id="app" class="selector" v-cloak><!-- All UI code needs to be in here -->
<Navbar></Navbar>
<div class="sbar">
<router-view></router-view>
</div>
</div>
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
<script defer src="../uibuilder/vendor/vue/dist/vue.js">/* dev version with component compiler */</script>
<!-- <script defer src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script> -->
<script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js">/* dev version */</script>
<!-- <script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* remove 'min.' to use dev version */</script> -->
<!--
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
-->
<script defer src="../uibuilder/vendor/vega/build/vega.js"></script>
<script defer src="../uibuilder/vendor/vega-embed/build/vega-embed.js"></script>
<script defer src="../uibuilder/vendor/apexcharts/dist/apexcharts.js"></script>
<script defer src="../uibuilder/vendor/vue-apexcharts/dist/vue-apexcharts.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
-->
<script defer src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
<script defer src="../uibuilder/vendor/vue-router/dist/vue-router.js"></script>
<script defer src="../uibuilder/uibuilder.iife.js"></script>
<!-- <script defer src="../uibuilder/uibuilder.iife.min.js">/* remove 'min.' to use dev version */</script> -->
<script defer src="./index.js">/* OPTIONAL: Put your custom code here */</script>
<!-- #endregion -->
</body>
</html>
you see, the difference is in the socket.io.js
and uibuilderfe.js
(uibuilder.iife.js
)
So, the errors which I dont have with the old index.html:
here: msgToSend._socketId = this._socket.id;
clientWidth missing an ID for the referencing
multiple side refresh and a single router-link action, like this:
I appologize in advance If any of this has been on the forum before - I coudn't find it
For the end, why bother with the "new" uibuilder?