Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript error for oh-label-card with trendItem and stylesheet #1423

Closed
sidamos opened this issue Jun 22, 2022 · 0 comments · Fixed by #2952
Closed

JavaScript error for oh-label-card with trendItem and stylesheet #1423

sidamos opened this issue Jun 22, 2022 · 0 comments · Fixed by #2952
Labels
bug Something isn't working main ui Main UI

Comments

@sidamos
Copy link

sidamos commented Jun 22, 2022

The problem

When I use an oh-label-card with trendItem AND custom stylesheet, then I get a JavaScript error on rendering.

Chrome:

TypeError: Cannot read properties of undefined (reading 'add')
    at i.mounted (app.js:1:50713)
    at qe (app.js:7:11332)
    at tn (app.js:7:25247)
    at Object.insert (app.js:7:20269)
    at O (app.js:7:60117)
    at i.__patch__ (app.js:7:61517)
    at e._update (app.js:7:34352)
    at i.a (app.js:7:68180)
    at fn.get (app.js:7:26678)
    at fn.run (app.js:7:27562)

Firefox:

TypeError: this.$el.classList is undefined
    mounted http://backend:8090/js/app.js:1
    qe http://backend:8090/js/app.js:7
    tn http://backend:8090/js/app.js:7
    insert http://backend:8090/js/app.js:7
    O http://backend:8090/js/app.js:7
    Ho http://backend:8090/js/app.js:7
    _update http://backend:8090/js/app.js:7
    a http://backend:8090/js/app.js:7
    get http://backend:8090/js/app.js:7
    run http://backend:8090/js/app.js:7
    pn http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    Ze http://backend:8090/js/app.js:7
    promise callback*Ye http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    update http://backend:8090/js/app.js:7
    update http://backend:8090/js/app.js:7
    notify http://backend:8090/js/app.js:7
    set http://backend:8090/js/app.js:7
    set http://backend:8090/js/app.js:7
    onWindowResize http://backend:8090/js/13.app.js:3
    mounted http://backend:8090/js/13.app.js:3
    at http://backend:8090/js/app.js:7
    Ze http://backend:8090/js/app.js:7
    promise callback*Ye http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    $nextTick http://backend:8090/js/app.js:7
    mounted http://backend:8090/js/13.app.js:3
    at http://backend:8090/js/app.js:7
    Ze http://backend:8090/js/app.js:7
    promise callback*Ye http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    $nextTick http://backend:8090/js/app.js:7
    mounted http://backend:8090/js/13.app.js:3
    qe http://backend:8090/js/app.js:7
    tn http://backend:8090/js/app.js:7
    insert http://backend:8090/js/app.js:7
    O http://backend:8090/js/app.js:7
    Ho http://backend:8090/js/app.js:7
    _update http://backend:8090/js/app.js:7
    a http://backend:8090/js/app.js:7
    get http://backend:8090/js/app.js:7
    run http://backend:8090/js/app.js:7
    pn http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    Ze http://backend:8090/js/app.js:7
    promise callback*Ye http://backend:8090/js/app.js:7
    at http://backend:8090/js/app.js:7
    update http://backend:8090/js/app.js:7
    update http://backend:8090/js/app.js:7
    $forceUpdate http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    p http://backend:8090/js/app.js:7
    L http://backend:8090/js/app.js:7
    promise callback*Nt/e< http://backend:8090/js/app.js:7
    Nt http://backend:8090/js/app.js:7
    Ft http://backend:8090/js/app.js:7
    Ft http://backend:8090/js/app.js:7
    _c http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    _render http://backend:8090/js/app.js:7
    a http://backend:8090/js/app.js:7
    get http://backend:8090/js/app.js:7
    fn http://backend:8090/js/app.js:7
    mount http://backend:8090/js/app.js:7
    $mount http://backend:8090/js/app.js:7
    $mount http://backend:8090/js/app.js:7
    init http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    f http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    Ho http://backend:8090/js/app.js:7
    _update http://backend:8090/js/app.js:7
    a http://backend:8090/js/app.js:7
    get http://backend:8090/js/app.js:7
    fn http://backend:8090/js/app.js:7
    mount http://backend:8090/js/app.js:7
    $mount http://backend:8090/js/app.js:7
    $mount http://backend:8090/js/app.js:7
    init http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    d http://backend:8090/js/app.js:7
    S http://backend:8090/js/app.js:7

Code for oh-label-card on page

component: oh-label-card
config:
  item: CO2
  title: OH Label Card
  trendItem: CO2
  stylesheet: |
    .abc {
      padding: 1px;
    }
slots: null

If I remove the inline stylesheet for the oh-label-card, the error is gone. Same for removing the trendItem.
So, I get the error if I have trendItem set AND stylesheet. The content of the stylesheet does not matter.
The widget is looking OK though.

Expected behavior

No errors should occur.

Steps to reproduce

See description.

Your environment

runtimeInfo:
  version: 3.2.0
  buildString: Release Build
locale: de-DE
systemInfo:
  configFolder: /home/mythtv/openHAB/conf
  userdataFolder: /home/mythtv/openHAB/userdata
  logFolder: /home/mythtv/openHAB/userdata/logs
  javaVersion: 11.0.15
  javaVendor: Eclipse Adoptium
  javaVendorVersion: Temurin-11.0.15+10
  osName: Linux
  osVersion: 5.10.61-gentoo-x86_64
  osArchitecture: amd64
  availableProcessors: 4
  freeMemory: 113013016
  totalMemory: 487587840
bindings:
  - avmfritz
  - chromecast
  - denonmarantz
  - enigma2
  - exec
  - homeconnect
  - homematic
  - http
  - ipcamera
  - lgwebos
  - mail
  - network
  - networkupstools
  - openweathermap
  - pushover
  - tr064
  - unifi
  - unifiprotect
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    pixelRatio: 1.125
    prefersColorScheme: light
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 4
    language: de-DE
    languages:
      - de-DE
      - de
      - en-US
      - en
    onLine: true
    platform: Linux x86_64
  screen:
    width: 2275
    height: 1280
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: dark
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
    Gecko) Chrome/102.0.0.0 Safari/537.36
timestamp: 2022-06-22T05:11:24.858Z

Browser console

See description.

@sidamos sidamos added bug Something isn't working main ui Main UI labels Jun 22, 2022
florian-h05 added a commit to florian-h05/openhab-webui that referenced this issue Dec 28, 2024
Fixes openhab#1423.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working main ui Main UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant