Blank screen in kweb

[atd]

I just built ONE branch using yarn build (without MQTT_SERVER env variable) and deployed it to my HestiaPi instance. But it just shows a blank screen

I also access via ssh and forward the display to my desktop, run kweb -J /home/pi/oneui.bad/index.html but it just does the same

However, if I open the file with Chromium it does shows Off, info icon, etc.. with some errors in the javascript console regarding MQTT connection to localhost (as expected) and one additional error about a ServiceWorker

register-service-worker.js:29 Error during service worker registration: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.
    at o (index.js:51)
    at index.js:43
error @ register-service-worker.js:29
stream.js:64 WebSocket connection to 'ws://localhost:9001/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
u @ stream.js:64
stream.js:64 WebSocket connection to 'ws://localhost:9001/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Any clues on what might go wrong, or how I can debug it?

[gulliverrr]

Can you load from your desktop this URL on a browser? [HestiaPi_IP]:8080

[atd]

Yes, openHAB loads as usual

Also, if I run MQTT_SERVER=HestiaPi_IP yarn serve and open the url in my desktop, it connects without any problem and shows temperature, humidity, heater icons, etc...

[gulliverrr]

Can you subscribe for MQTT topics to see if they are published/updated when you play with OH ?

[atd]

I don't think it is a MQTT problem, everything seems to be ok in the openHAB side

I run MQTT_Explorer and can see topics updating

Besides, I can run the original one-ui (I made a backup :smile:) with kweb -J /home/pi/scripts/oneui/index.html and it works ok

[gulliverrr]

I think it may be a permission thing with the UI files you built... Try running the chmod and chown commands related to the paths that include the /oneui from the update script.

[atd]

Ok, so I managed to build a kind of trace mechanism in kweb using

<script>window.onerror = function(msg, url, lineNo, columnNo, error) { alert(msg); alert(url); alert(lineNo); alert(columnNo); alert(error); }</script>

just before the <noscript> tag (before js scripts load) and I get the following:

msg: SyntaxError: Unexpected identifier 'r'
url: file:///home/pi/oneui.bad/js/chunk-vendors.00f6062f.js
lineNo: 13
columnNo: 0
error: undefined

So it seems to be an issue regarding webpack and minification?

[jaythomas]

@atd which commit revision are you on? Also, can you update vue.config.js to not minify and see what the real line number/error is? https://github.com/HestiaPi/hestia-touch-one-ui/issues/13#issuecomment-590933959

[atd]

I am at https://github.com/HestiaPi/hestia-touch-one-ui/commit/359e7f2981536342c6ec7df556d420628a2cba22

I checked it without minification and I get

SyntaxError: Unexpected identifier 'index'
file:///home/pi/oneui.bad/js/chunk-vendors.ba4f48e6.js
13619
0
undefined

which corresponds to

let index = 0;

This is the first appearance of in that file, let so it seems to be a babel transpiler issue

[atd]

I can confirm the let issue, because in my new generated dist/js/chunk-vendors.xxx.js I can find statements like let r= but I cannot find them in the original HestiaPi's

I have tried to configure vue browserlists to safari 9, because it uses webkit like kweb, and it is the latest Safari version not supporting let but I still see the let statements in the dist/ file :disappointed:

[jaythomas]

Thanks for the additional information. That's a bit puzzling as nothing in the build process has changed over the last several commits and unfortunately I am not able to replicate the issue. The bundle I generate from running yarn build is strictly ES5.

I'll have to take a closer look at the babel and webpack config tomorrow if you're still having issues. Do you remember which commit were you building that you weren't seeing the issue?

[atd]

Yes, I think it is something related to my setup. I have:

node version: 10.17.0 yarn version: 1.22.0

I started a git bisect, I tested until https://github.com/HestiaPi/hestia-touch-one-ui/commit/6ee0e509e3f79ad9b54a23c6687babd3a97f863d and all of them were failing as well

I haven't be able to get a build that is ES5

[jaythomas]

@atd I've added my yarn.lock file to the repo. Try deleting your lock file if you have one, pulling the latest change, and running yarn to update your node modules.

If you still have issues with your generated build try updating to the latest version of node. Here's the versions I'm using:

node version: 13.9.0 yarn version: 1.12.3

[gulliverrr]

@jaythomas the .lock file caused these alerts.

[atd]

Sure, I will ASAP

@gulliverrr I cannot access the alerts (404), but I was missing the yarn.lock. It is recommended to be checked into the source control

[atd]

Yay! That did it! Now I can see the UI working fine

Thank you both for your support!