I made the mistake to updating uibuilder to v3 and now neither the basic example nor my own pages work. I have looked at the update log and cannot see anything obvious that I have to change.
Anyone any ideas on what I should be looking at?
Are you seeing any errors in the Node-RED log or in the browser?
Have you tried creating a new instance of the node? So that you can test the default template and settings?
Can you give us a bit more information ?
Is the node visible on your Flow or is it red / missing ?
Also in Manage Palette does it say that its installed / version 3 ?
Bunch of errors in the browser (fresh instance of default created)
192.168.1.20/:1 Refused to apply style from 'http://192.168.1.20:1880/uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
192.168.1.20/:1 Refused to apply style from 'http://192.168.1.20:1880/uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
vue.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap-vue.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
index.js:24 Uncaught ReferenceError: Vue is not defined
at index.js:24
192.168.1.20/:1 Refused to apply style from 'http://192.168.1.20:1880/uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
192.168.1.20/:1 Refused to apply style from 'http://192.168.1.20:1880/uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Someone will have to help with the node-red log as I only get the first bunch of lines and I have no idea how to get it to continue. Nothing showing on the debug screen.
Manage Palette does indeed say that v3 is installed. Same on 2 instances of node-red
The problem is that I just get a blank screen. I am guessing that the problems with bootstrap are what is causing this.
Your HTML is incorrect I think. You are trying to load CSS files as text/html which no longer works. Can you share the head section of your index.html?
From example uibuilder;
<!doctype html>
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title> <meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template"> <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" /> <!-- Your own CSS --> <link type="text/css" rel="stylesheet" href="./index.css" media="all">
That is not from the default template (I hope!). since you are missing several things.
Best to paste in the html in full - though you can miss out your custom ui code. Include everything else including the js links at the bottom.
Also check the networks tab in the browser dev tools and see if you are getting 404 errors.
This is the html file from a fresh loaded uibuilder node. I did find that if I delete the text part of the type="text/css" I do at least get the basic text on screen.
<!doctype html>
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title> <meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template"> <link rel="icon" href="./images/node-blue.ico"> <link type="css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" /> <link type="css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" /> <!-- Your own CSS --> <link type="css" rel="stylesheet" href="./index.css" media="all"><div id="app" v-cloak> <b-container id="app_container"> <b-img src="./images/node-blue-192x192.png" rounded left v-bind="imgProps" alt="Blue Node-RED" class="mt-1 mr-2"></b-img> <h1>UIbuilder + Vue.js + bootstrap-vue for Node-RED</h1> <p> This is a uibuilder example using <a href="https://vuejs.org/">Vue.js</a> as a front-end library. See the <a href="https://github.com/TotallyInformation/node-red-contrib-uibuilder">node-red-contrib-uibuilder</a> README for details on how to use UIbuilder. </p> <h2>Simple input using Vue</h2> <b-form class="border p-3 m-2"> <p> You can very simply create a form using Vue & bootstrap-vue. The form sends data back to Node-RED. Look at the <code>increment</code> method in <code>index.js</code> to see how easy this is. </p> <p> <b-form-input v-model="inputText" type="text" placeholder="Enter some text to send to Node-RED"></b-form-input><br> <b-form-checkbox v-model="inputChkBox"> To tick or not to tick? That is the question </b-form-checkbox><br> <b-button id="btn_increment" pill variant="primary" v-on:click="increment">Increment</b-button> Click Counter: <b>{{counterBtn}}</b>. <p>Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.</p> </p> </b-form> <h2>Simple Logon/Logoff form</h2> <b-form class="border p-3 m-2"> <p v-if="! isLoggedOn"> <b-form-input v-model="inputId" type="text" placeholder="Enter user id to logon"></b-form-input><br> <b-button id="btn_logon" pill variant="primary" v-on:click="doLogon">Log On</b-button> </p> <p v-if="isLoggedOn"> <b-button id="btn_logoff" pill variant="primary" v-on:click="doLogoff">Log Off</b-button> </p> </b-form> <h2>Dynamic Data</h2> <div> <p>Uses Vue to dynamically update in response to messages from Node-RED.</p> <p> Check out the <code>mounted</code> function in <code>index.js</code> to See how easy it is to update Vue data from Node-RED. </p> <b-card class="mt-3" header="Status" border-variant="info" header-bg-variant="info" header-text-variant="white" align="center" > <p class="float-left">Socket.io Connection Status: <b>{{socketConnectedState}}</b></p> <p class="float-right">Time offset between browser and server: <b>{{serverTimeOffset}}</b> hours</p> </b-card> <b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" > <p> Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b> </p> <pre v-html="hLastRcvd" class="syntax-highlight"></pre> <pre v-html="hLastSent" class="syntax-highlight"></pre> <p slot="footer" class="mb-0"> The received message is from the input to the uibuilder node. The send message will appear out of port #1 of the node. </p> </b-card> <b-card class="mt-3" header="Control Messages" border-variant="secondary" header-bg-variant="secondary" header-text-variant="white" align="left" > <p> Control Messages: Received=<b>{{msgsControl}}</b>, Sent=<b>{{msgsCtrlSent}}</b> </p> <pre v-html="hLastCtrlRcvd" class="syntax-highlight"></pre> <pre v-html="hLastCtrlSent" class="syntax-highlight"></pre> <p slot="footer" class="mb-0"> Control messages always appear out of port #2 of the uibuilder node whether they are from the server or the client. The <code>from</code> property of the message tells you where it came from. </p> </b-card> </div> </b-container> </div> <!-- Dont forget to use minified versions of libraries for production, non-min versions for development only --> <!-- These MUST be in the right order. Note no leading / --> <!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection --> <script src="../uibuilder/vendor/socket.io/socket.io.js"></script> <!-- --- Vendor Libraries - Load in the right order --- --> <script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler --> <!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler --> <!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler --> <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script> <!-- REQUIRED: Sets up Socket listeners and the msg object --> <script src="./uibuilderfe.js"></script> <!-- dev version --> <!-- <script src="./uibuilderfe.min.js"></script> //prod version --> <!-- OPTIONAL: You probably want this. Put your custom code here --> <script src="./index.js"></script>
The start of your index.html file should look something like this:
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template">
<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" />
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head><body>
<div id="app" v-cloak>
<! --- YOUR UI CODE HERE -->
</div>
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>t -->
<script src="./uibuilderfe.min.js"></script>
<script src="./index.js"></script>
</body></html>
Note the differences from your code. In particular, you are missing several tags between the doctype and the title.
The above was generated from a new uibuilder node with the default template - I just removed the comment lines and use the prod js rather than dev.
Actually, removing those lines does still work - with Edge Chromium anyway. However, you shouldn't remove them.
Here is the output from my network tab
Yours should look similar.
Can you also share what OS you are using and what versions of node.js, and node-red you are using.
Yes, sorry about that I have no idea how that file lost bits in both instances of node-red but I found a copy I had saved previously and I get the same results. I am thinking that the bootstrap files have got deleted. This is the html of the original I found. Still doesn't work although as before if I delete the text part of the "text/css" I do get the text onscreen
What you have shared is still not complete. This implies something is rather wrong with your installation of Node-RED.
Please confirm that you have added a new instance of the uibuilder node, deployed it and checked the resulting url.
Also please share the version of node.js, node-red and the OS you are using. Also share the output of your networks tab from the ui page after doing ctrl-f5 to clear the cache.
OK, your installation is borked. You will need to remove and reinstall vue and bootstrap-vue.
OK, how do I do that. I could save all the text from the html, js & vue files from the nodes I have in the flows and delete the uibuilder node so that I can install it again if necessary
You can safely remove uibuilder if you like, your code will remain safe and you can re-create the nodes with the same name, it will pick up the existing code.
However, I suggest that you use the command line:
cd %USERPROFILE%/.node-red
npm remove vue bootstrap-vue
npm install vue@2.6.12 bootstrap-vue
1 Like
Thank you for the help. Reinstalling bootstrap sort of worked but deleting and reinstalling the node was the best solution, and as you pointed out recreating the node with the same name as previously reloaded all the original data files.
Merry Christmas & a Happy New Year
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
