Looks like the current Firefox version doesn’t support dynamic import. It is available in the nightly version, but you need to turn it on. Should make it into release for FF soon. I will consider making the change to the card to make it compatible.
Thank you. I have temporarily commented the problematic import in the code and it works, obviously without the editor 
1 Like
Should have mentioned that, but as you found out its not needed unless you’re using the editor.
Thanks for the idea. I just learnt how to comment out js. 
/*
static async getConfigElement() {
await import("./compact-custom-header-editor.js?v=1.0.0b0");
return document.createElement("compact-custom-header-editor");
}
*/
I’m still using lovelace yaml mode, so I don’t even need editor.
Thanks for the heads-up on this. Firefox user here. I was on the fence on whether to go ahead with an early caemrd update and now I guess it’s better to hold for a few weeks (or months? until the new firefox is out?). The old release is still very solid
Hi @mayker,
I just did the upgrade to v. 1.0.0b0 and everything looks great most places. Great work on making the new config make so much more sense.
The only place I have a problem - and it’s a possible showstopper for me - is on my actual kiosk device which is a fire 7 tablet running fully kiosk browser (which has an old, embedded chrome in it). On that device I’m getting no compact custom header functionality and there is a red banner at the bottom of the views that says “Custom element doesn’t exist: compact-custom-header.”
Do you think that has to do with the old chrome version trying to import the js as a module?
Unfortunately, the fully kiosk browser is a pretty closed system and i am very limited in either upgrading it or getting much debug data from it.
Any suggestions?
Quick update to remove dynamic import, should fix firefox and older browsers. Also added current username display in the editor.
1 Like
That update isn’t addressing the issue I’m seeing on my fire tablet. It’s not the same error that @sylas11 and others were seeing with dynamic imports on FF.
My tablet is not registering the existence at all of the custom element compact-custom-header. The file is there and all my other platforms are working fine. Not much of a modern js guy, but I can only guess that it can’t deal with the js as a module - does that make sense?
I’m not sure what the issue might be. I just checked out fully kiosk browser on my phone and a tablet and everything is functional. It’s going to be difficult to track this one down if no errors display in HA as I don’t think fully kiosk has any real debugging like you said. I have a fire tablet that I can test when I get home, hopefully that will help me track it down.
Just to confirm, there are no errors in your HA log for the card? Have you tried other browsers on that tablet and do they act the same? Have you tried to remove any exceptions for that device? Have you cleared fully kiosks cache?
Had the same problem, forgot to download the second file compact-custom-header-editor.js
After download and hammering CTRL-F5 multiple times, all works now.
If you have a CTRL-F5 anywhere, I doubt it’s the same problem, though it might have shown you the same symptom. Nothing like CTRL-F5 on my Fire 7 tablet running fully kiosk browser. Both files are there and all my other devices are working fine.
ya, no HA errors related to this.
I just spent about an hour updating the crap out of the tablet - bunch of system updates, latest fully, etc. then restarted. I cleared the fully cache two ways (from within fully and also using the ?clear_cch_cache URL). I tried it with the silk browser on the device and compact custom header loads and works fine. So it definitely seems to be a fully browser thing. If it worked ok for you in fully on your phone, then maybe it’s a fully on fire 7 thing… (btw, there is a special fully fire APK that is not in the app store, only available from the fully site here - that’s what i am using).
I have a problem with the notification icon.
I am trying to hide it under the options when on mobile but with this configuration it wont show up under the options-menu. However, the menu correctly disappears on mobile so the exception works.
cards:
- type: 'custom:compact-custom-header'
main_config: true
menu: show
notifications: show
voice: hide
options: show
exceptions:
- conditions:
user_agent: Mobile
media_query: '(max-width: 600px)'
config:
menu: hide
notifications: overflow
Edit: Notification badge doesnt seem to work at all, not just with the exception
cards:
- type: 'custom:compact-custom-header'
main_config: true
menu: show
notifications: overflow
voice: hide
options: show
second edit:
Found this in the console, do i need to update Home Assistant?
Uncaught (in promise) TypeError: this.hass.localize is not a function
at HTMLElement.getTranslation (compact-custom-header.js:374)I can tell you from experience, you will be unable to run any lovelace custom card that uses type: module on a Fire Tablet using Fully Kiosk. Amazon’s version of Webview, which Fully Kiosk uses, will not render those lovelace custom cards of type: module.
I ended up having to dump my wall mounted Fire tablets for this very reason, and replaced those with Lenovo Tab4 tablets because I wanted to use Fully Kiosk with custom Lovelace cards (type: module)
1 Like
What version of HA are you running?
Thanks for that, saved me a bit of troubleshooting.
1 Like
grrr. That’s what i was afraid of.
So I just upgraded to 1.0.0b1 and i seem to be having troubles with exceptions… is my setup correct?
- type: custom:compact-custom-header
main_config: true
options: hide
menu: hide
voice: hide
hide_tabs: 4,5
exceptions:
- conditions:
user: Kenny
config:
options: show
menu: show
hide_tabs:
looks good, what troubles are you having?
When I’m logged in as Kenny I get the default setup (with everything hidden). And I just made sure and my profile has it as “You are currently logged in as Kenny. You are an owner.” so I’m pretty sure I’ve got my user correct.