Custom element doesn't exist: grocy-chores-card.
Greenphlem opened this issue · 40 comments
Hello,
Just today, my Grocy card stopped working giving me the error on my Lovelace dashboard: Custom element doesn't exist: grocy-chores-card
I see the card's resource under Dashboards > Resources but it is not seeming to load.
Here's my card YAML:
entity:
- sensor.grocy_chores
title: Today's Chores
show_quantity: 3
show_days: 0
user_id: 2
show_assigned: true
show_overflow: true
show_chores_without_due: true
show_tasks_without_due: true
use_icons: true
date_due_threshold: 0
show_last_tracked: false
This happens when the JavaScript host unpkg has a temporary outage. It hits me often too, and it’s annoying. Maybe someone with experience packaging JS could make a build that pulls this card’s dependencies to be fully local?
I played with https://rollupjs.org/ a bit and created a "rolled-up" version of the card to use locally, and it is pretty nice. The rolled up card always loads instantly with the rest of the frontend on page refresh. When I use the released unpkg version of the card the rest of the frontend always loads first, and then the grocy card "pops in" 0.5-1.0s later (if it doesn't have an error).
Steps I did (for my future reference), or if anyone wants to repeat:
npm install --global rollup
npm install lit
npm install luxon@3.0.3
npm install @rollup/plugin-node-resolve --save-dev
Modify these lines in grocy-chores-card.js
< import {html, LitElement, nothing} from "https://unpkg.com/lit?module";
< import {DateTime} from "https://unpkg.com/luxon@3.0.3?module";
---
> import {html, LitElement, nothing} from "lit";
> import {DateTime} from "luxon";
Modify lines in style.js
< import {css} from "https://unpkg.com/lit?module";
---
> import {css} from "lit";
Create this file rollup.config.mjs:
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'grocy-chores-card.js',
output: {
dir: 'output',
format: 'es'
},
plugins: [nodeResolve()]
};
Run
$ rollup --config rollup.config.mjs
(output)
grocy-chores-card.js _ output...
(!) Circular dependencies
node_modules/luxon/src/impl/locale.js -> node_modules/luxon/src/settings.js -> node_modules/luxon/src/impl/locale.js
node_modules/luxon/src/datetime.js -> node_modules/luxon/src/duration.js -> node_modules/luxon/src/impl/locale.js -> node_modules/luxon/src/datetime.js
node_modules/luxon/src/datetime.js -> node_modules/luxon/src/interval.js -> node_modules/luxon/src/datetime.js
node_modules/luxon/src/datetime.js -> node_modules/luxon/src/info.js -> node_modules/luxon/src/datetime.js
node_modules/luxon/src/datetime.js -> node_modules/luxon/src/impl/tokenParser.js -> node_modules/luxon/src/datetime.js
created output in 1.7s
Copy the grocy-chores-card.js from /output/ to my /www/ folder and update the resources to point to it.
The packaged card is 267kb instead of 29kb, but it loads much faster.
I assume this project could be configured to do this with some kind of github pipeline, but what kind of work that requires to set up I do not know.
Hello,
I would like to return to this bug. Currently this is not related to unpkg outage but some syntax error error:
SyntaxError: unknown: Support for the experimental syntax 'logicalAssignment' isn't currently enabled (6:629):
https://unpkg.com/lit-element@4.0.0/lit-element.js?module
https://unpkg.com/@lit/reactive-element@2.0.0/reactive-element.js?module
Hi,
I have the same Issue. even with Version 3.6
Yesterday everything worked just fine. Now the card only displays the error: "Custom element doesn't "
I tried reinstalling it clearing browser chache. Nothing worked!
@isabellaalstrom @karwosts is there any fix availlable?
Thanks
Same thing happened to me today on v3.8.1 of grocy-chores-card
I also started receiving this error today. I was on 3.6.1 and had changed nothing, but I tried updating to 3.8.1 to see if anything changed and it did not. Something server-side somewhere has broken today, but I'm not knowledgeable enough to know what.
Edit: Ok, I do know what - as noted above there seems to be a configuration error (on unpkg?) that is preventing the build of one of the dependencies of the grocy custom card. But I'm not knowledgeable enough to know how to fix it!
I am sorry to hear that, but unfortunately I don't have the time to work on a fix. If someone has the time and knowledge and makes a pr I will look at it.
Same Error to me since yesterday.
Is there any working version or workaround for HA-Docker?
Also running into this issue again, would be great if the JS resource could be used locally but I'm not familiar enough how to rework it to do so.
The steps I posted above to create a rolled up card still work if you want to fix the issue locally, and will remove the cloud dependency on unpkg.
It's a bit technical though.
The steps I posted above to create a rolled up card still work if you want to fix the issue locally, and will remove the cloud dependency on unpkg.
It's a bit technical though.
I have tried these steps. It didnt compile because of an error: SECOND_ROUNDING_EPSILON = 0.000_000_1;
could you please share your modified grocy-chores-card.js ?
I've attached the card I compiled, I don't recall exactly what version it is from.
Generally I would suggest not installing .js files from randos on the internet, but it's here at your own risk 😁
Worked brilliantly, thanks!
@karwosts Do these steps not depend on a working version of lit-element being available on unpkg?
@karwosts Do these steps not depend on a working version of lit-element being available on unpkg?
I think this is where the error might come from.
Generally I would suggest not installing .js files from randos on the internet, but it's here at your own risk 😁
ok than i'll wait😂 but isn't the original github file also from the internet?
Do these steps not depend on a working version of lit-element being available on unpkg?
I don't think so. To follow the steps it installs lit from npm on your system, and then compiles it into the output js file. unpkg is not part of the toolchain.
Haven't tested but what about simply using another CDN instead of unpkg for the time being:
import {html, LitElement, nothing} from "https://esm.run/lit";
import {DateTime} from "https://esm.run/luxon@3.0.3";
or
import {html, LitElement, nothing} from "https://cdn.jsdelivr.net/npm/lit/+esm";
import {DateTime} from "https://cdn.jsdelivr.net/npm/luxon@3.0.3/+esm";
Just as a info compiling works just download Node.js for windows and do not use WSL.
and the new pointer is /local/community/ instead of hacksfiles
Really appreciate the info on a local build, but of course a "fix" that involves everyone compiling their own instead of installing from HACS is not really optimal. Changing the CDN as suggested by @poxin13 would seem like a good idea, is anyone able to test and maybe create a PR?
just one last thing. Should the goal in the end be to be reliant on online services? A compleatly local card loads much faster, works without internet and is much more futureproof.
I would rather prefer a local only solution as a default solution
just one last thing. Should the goal in the end be to be reliant on online services? A compleatly local card loads much faster, works without internet and is much more futureproof. I would rather prefer a local only solution as a default solution
I agree with this. I actually use this card on a wall mounted tablet that has no access to the internet, local only, so it's been a struggle using this package.
I saw that @isabellaalstrom started a branch a couple years ago experimenting with card rollup, but it doesn't look like that was ever fully pursued.
https://github.com/isabellaalstrom/lovelace-grocy-chores-card/tree/rollup
Isabella, just curious do you recall what happened there, was it unsatisfactory, or did you just never have time to work on it?
I agree that local is so much nicer. When I use local card it is always loaded instantly, versus always a 1-second late card popin from the CDN (or occasional random errors if it is delayed more than 2s).
I compiled the newest version of the card and it works perfectly. I see no drawbacks so far.
Agree that local is nicer. Changing CDN would be a quick fix in the interim though - until then this card is going to be broken for everyone unless something changes on unpkg.
For an automated fully local build, I don't know enough about GitHub's CI/CD pipeline to be able to automate a local build - I've done things like this on GitLab but not over here. Anyone want to have a go?
I haven't messed with this stuff too much before, but I tried playing with a CI pipeline here to build the packaged version on release. It seems to work, and when I download the card in the bundle's assets, it works for me.
https://github.com/karwosts/lovelace-grocy-chores-card/releases/tag/v0.0.2
Maybe this will be useful.
This is also installable via HACS: https://github.com/karwosts/lovelace-grocy-chores-card
That's excellent. Any chance of putting in a PR to have it added to the main repo, and a new release created? That would fix the problem for everyone by just upgrading from HACS.
I'm willing to collaborate to help this effort, but first would like some feedback from the repository owner if that's a direction she wants to go in.
I imagine it could be a disruptive change, and I'm not sure how hacs will treat switching from a source file to a released asset file.
That's excellent. Any chance of putting in a PR to have it added to the main repo, and a new release created? That would fix the problem for everyone by just upgrading from HACS.
I'm willing to collaborate to help this effort, but first would like some feedback from the repository owner if that's a direction she wants to go in.
I imagine it could be a disruptive change, and I'm not sure how hacs will treat switching from a source file to a released asset file.
Go for it, I think it's the best way forward. We'll see how hacs handles it
I haven't messed with this stuff too much before, but I tried playing with a CI pipeline here to build the packaged version on release. It seems to work, and when I download the card in the bundle's assets, it works for me.
https://github.com/karwosts/lovelace-grocy-chores-card/releases/tag/v0.0.2
Maybe this will be useful.
This is also installable via HACS: https://github.com/karwosts/lovelace-grocy-chores-card
Installing this repo and card has worked for me.
Thanks a lot!
I haven't messed with this stuff too much before, but I tried playing with a CI pipeline here to build the packaged version on release. It seems to work, and when I download the card in the bundle's assets, it works for me.
https://github.com/karwosts/lovelace-grocy-chores-card/releases/tag/v0.0.2
Maybe this will be useful.
This is also installable via HACS: https://github.com/karwosts/lovelace-grocy-chores-card
Installing this repo and card has worked for me.
Thanks a lot!
Installed this via HACS, the card is working again. Great work
Works brilliant.
@karwosts @isabellaalstrom
Thanks for your work.
Any chance this gets merged into master?
@karwosts Great stuff mate, cheers to the OG @isabellaalstrom
Ok I just released v3.8.2 as a HACS beta, it should fix the problem. Anyone can confirm?
@karwosts Confirmed working for me.
@karwosts working here as well. Removed bug screenshot -- not a bug, rather misconfiguration on my end carried over from old version.
There were a couple feature changes since the last functional release, so there could be some changes. Looks like show_days is not supposed to be a boolean as per the docs though.
That said I think this issue can be closed now, and the resolution is to update to v3.8.2.
Please open new issues if you find new bugs in the latest release,