Compact Custom Header

FunkyBoT · June 29, 2019, 7:17pm

I am getting the message in every page: “Custom element doesn’t exist: compact-custom-header.”
It was working perfectly before, I haven’t change anything in configuration but to update CCH (1.1.18) and update HA to 95.4 (the issue was already present in 95.1).
Anyone had the same issue?

ludeeus · June 29, 2019, 7:20pm

Anyone that did not read the breaking changes before upgrading CCH past 1.1.0 have those issues.
There is a reason you receive a persistent notification now

mayker · June 29, 2019, 7:28pm

@FunkyBoT There was a major breaking change in 1.1.0. It is mentioned in the HACS info, the readme, and in a persistent notification on your system. There is a link with upgrade instructions in each of those places.

mayker · June 29, 2019, 7:37pm

If anyone is still having issues with the editor not displaying after installing version 1.1.8:

Be sure to hard refresh (Ctrl+Shift+R) or clear cache and refresh the page. If the issue persists please provide:

The browser/s are you using
Any errors that display in the HA logs or in your browsers dev tools console (F12)
Your config/resources section

Also if you currently have no config for cch try adding it manually. Thank you for your help and patience as I work through these issues.

Yoinkz · June 29, 2019, 8:06pm

I get the following error after the 1.1.8 update (running 0.95.4).
I don’t see any errors on the log page.

Tried the CTRL+SHIFT+R.
I also tried in another browser and with icognito - no difference.

Any suggestions?

ludeeus · June 29, 2019, 8:15pm

So the issue here is that you did not read the breaking changes when updating past version 1.1.0, you did not read the 10 last post in this thread that would have given you an idea to actually read those

So now, what to do?
In your Home Assistant there is a persistent notification (bell icon) warning you about your issue, in that notification there is a link.
click that link and follow the steps, it will show you exactly what you need to do.

In case you just dismissed that notification here is a link to the same page.

Now over to a general “announcement” (not directed to any particular user)

When you do update/upgrade elements (no matter what it is a custom_component, a card or your office installation) make sure you read the changelog, specifically the things marked as breaking changes.
Anything custom are especially prone to breaking changes and you should read them before updating/upgrading.

Good luck!

Yoinkz · June 29, 2019, 8:26pm

Okay, thanks.

Yoinkz · June 29, 2019, 8:55pm

When opening the CCH editor, a spinning wheel keeps appearing and nothing else happens.

Google Chrome / Firefox
Browser Log:

:8123/customcards/github/maykar/compact-custom-header.js:417 Uncaught (in promise) TypeError: Cannot read property ‘style’ of null
at styleButtons (:8123/customcards/github/maykar/compact-custom-header.js:417)
at run (:8123/customcards/github/maykar/compact-custom-header.js:104)
at :8123/customcards/github/maykar/compact-custom-header.js:89

  - type: module
    url: /customcards/github/maykar/compact-custom-header.js?track=true

EDIT: Also, when using the cch: in the UI based text editor, I have to place the code at the very top and above the resouces:

cch:
  background: 'rgba(150, 150, 150, 0.2)'
  chevrons: true
  clock_am_pm: false
  clock_date: true
  clock_format: 24
  options: clock
resources:
  - type: js
    url: 'https://unpkg.com/[email protected]/min/moment-with-locales.js'
  - type: module
    url: /customcards/github/calendar-card/calendar-card.js?track=true
  - type: js
    url: /customcards/github/custom-cards/tracker-card.js?track=true
  - type: js
    url: /local/custom_ui/weather-card.js   and so on....

FunkyBoT · June 29, 2019, 9:28pm

Thanks for the tip. In fact I took a look before asking, but since I believed that I was using a version after 1.1.0 that was working ok, I thought that 1.1.0 breaking change would not affect me.

well, I made that changes and I no longer receive the error in the first page, where my CCH configuration is placed, but it is still was present in the following pages. Since I have a lovelace split configuration, may it would be the reason.

It’s weird but after a restart of HA everything is fine. I might be useful to someone else.
Thanks everyone for the help.

tbar05 · June 29, 2019, 11:13pm

i still cant see the CCH menu after updating to 1.1.8

i have hard refreshed the page

chrome
Uncaught TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.
at monitorElements (compact-custom-header.js:232)
at run (compact-custom-header.js:151)
at compact-custom-header.js:89
tried config with just cch: null and also…

cch:
  clock_date: true
  clock_format: '12'
  notifications: hide
  options: clock
  voice: hide
resources:
  - type: js
    url: /local/custom_ui/dark-sky-weather-card.js?v=4

the card appears to be working… i just cant see the cch editor in the options

cdrom1028 · June 29, 2019, 11:16pm

I had the same thing on mine, I think @mayker is close to having a fix for that issue…

tom_l · June 30, 2019, 6:11am

Menu is now working with the latest update (1.1.9).

Grzech · June 30, 2019, 7:08am

1.1.9 - success, menu visible again

Yoinkz · June 30, 2019, 9:12am

Works after 2.2.+[quote=“Yoinkz, post:861, topic:83716”]
When opening the CCH editor, a spinning wheel keeps appearing and nothing else happens.
[/quote]

Now working again after 1.1.19 update!
Thanks!

mayker · June 30, 2019, 12:43pm

Thanks to all for your patience with these issues. I meant to make an update post for 1.1.9, but it was quite late and I just crashed.

Huge thanks to @chenchen119 & @cdrom1028 for their help in troubleshooting these issues.

krovachek · June 30, 2019, 8:26pm

Is there any possibility to change the header position to left-vertical on my dashboard views? Like on Tileboard for example:

mayker · June 30, 2019, 8:46pm

This would be quite the undertaking. I’ve thought about it and early in CCH’s development I played with it, but ultimately it caused too many issues. This doesn’t mean that it wont happen, but I can’t give any kind of time frame or make any promises.

Mariusthvdb · July 1, 2019, 10:21am

just noticed that in the inspector this error pops up on each tab change. Since it shows the rtl which I haven’t set anywhere, the only thing I could imagine is the header to cause it?

Unhandled Promise Rejection: TypeError: this.toggleAttribute is not a function. (In 'this.toggleAttribute("rtl",Object(k.a)(this.hass))', 'this.toggleAttribute' is undefined)

anyone else seen that appear?

mayker · July 1, 2019, 11:45am

I don’t believe this is related to CCH. CCH has no function “toggleAttribute”, but I will look into it. If this is a consistent issue you could disable CCH in your resources and see if it still happens.

mayker · July 1, 2019, 11:46am

Pre-Release 1.1.9b1

I’ve published a pre-release 1.1.9b1 . It moves CCH Settings back under “Configure UI” and tweaks things a bit. It’s a pre-release to make sure that the previous issues have not worked their way back. I’m very interested if the folks that were having issues have them again in 1.1.9b1. Only update if you are willing to give it a test. It also adds the ability to hide “Unused entities”