Custom element doesn't exist: config-template-card

[jmcollin78]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.3.6

Last working release (if known):

Browser and Operating System:
Chrome. MacOS Monterey 12.1

Description of problem:
After successful installation with HACS, I try to use the card. I manually insert the following card code:

type: custom:config-template-card
entities:
  - light.lampe_entree_1
card:
  type: entities
  entities:
    - entity: light.lampe_entree_1
      name: Ca roule ?

And Whatever I do I've got the error:

Custom element doesn't exist: config-template-card.
type: custom:config-template-card
entities:
  - light.lampe_entree_1
card:
  type: entities
  entities:
    - entity: light.lampe_entree_1
      name: Ca roule ?

Javascript errors shown in the web inspector (if applicable):
No specific errpr

Additional information:
Of course light.lampe_entree_1 exists.
I read this post #76 which is the same kind of problem

[miglor-bcn]

Hi, one more with the same issue like @jmcollin78

I also have this issue with HA core 2022.2.9

[iantrich]

I'm unable to replicate. I'm on 2022.3.0 and things are working as expected

[TheRealBenForce]

Also having this issue on 2022.5.5

[mwrben]

I had this issue after installing with HACS and I restarted core and it then worked fine

[Yari117]

Same here. Installed manually to www/config-template-card/
Then added lines to configuration.yaml at resources
Still it does not work

HA 2022.12.1

[BertKleewein]

I had this problem. I fixed it with some fumbling and stumbling. I tried to figure out exactly what made it work, but I can't get it to break again to figure out what actually fixed it.

I'm using config-template-card version 1.3.6, manually installed with Home Assistant 2022.11.4 and Frontend 20221108.0 - latest. I'm using Firefox 104.0.2 on Linux Mint.

While I was doing this, I learned two things:

1. If you have trouble loading a resource (like config-template-card), browser caching might be causing it to use an older version of the code. Adding ?v=<something> to the end of the resource_url will supposedly force the code to reload. It doesn't matter what is as long as it's something you haven't used before. For example, this is from my lovelace_resources.yaml:

- url: "/local/config-template-card.js?v=7"
  type: module

?v=7 just means I did 7 experiments, starting at ?v=1 and going up.

2. If you're changing resources, you also need to refresh the browser to make sure the new code loads. I was just leaving my test page open in the browser and restarting my hass docker container every time I edited lovelace_resources.yaml. This wasn't enough to load the new JavaScript code. I also needed to F5 to refresh the page.

Because I didn't know these things an hour ago, I can't be sure what exactly I did to make it work. I do have some theories:

1. It's possible that adding ?v=1 to the url in lovelace_resources.yaml fixed it. I can't be sure because I didn't refresh my browser.

2. It's also possible that I fixed this by opening a browser tab and loading http://automation.localdomain:8123/local/config-template-card.js (automation.localdomain is my home assistant install). I did this because I wanted to see if some permission problem was preventing the file from being served, but it's possible that this forced a preload or refreshed a cache somewhere.

3. As part of my experiments, I tried reverting config-template-card.js to version 1.3.5 to see if something in 1.3.6 caused this bug. Because of the two things I learned above, I'm not sure if this did anything. I seems to work well with 1.3.5 or 1.3.6 now. (BTW, awesome size improvement from 1.3.5 to 1.3.6 @iantrich! 160 KB to 67 KB! I assume this was because of your dependency changes.)

I'm guessing that theory # 1 (adding ?v=1) fixed it for me. It's possible that it was theory # 2. I doubt it was # 3.

[Aaroneisele55]

I also have it (#126)

[resultzh]

I also have it

[victor-popescu90]

I just had this problem and I think I know what the problem is.

It only shows this when the config-template-card syntax is not correct.
If anything is slightly wrong then this error shows up, and it highlights all code related to config-template-card as error.

[husbspamuel]

Has this been resolved at all. I have the same issue, I've tried:

1. removing / re-adding
2. Using a version number on the resources path
3. clearing cache - each time I change something
4. different browsers - each time I change something
5. I've left it as .ts and .js extensions

I've noticed that inspecting the page with dev browser tools shows errors about the "@" on lines 15-19
Tried modifying this and no luck

Any advice would be appreciatd

[ildar170975]

Please check with the latest HA version, Chrome with DEFAULT settings and a purged cache, latest card version.
I am using HACS to install cards. Do not edit resources at all manually. An I only observed this “card not found” message for SOME cards only on an ancient iPhone 5S. Of course not to mention a “safe mode”.

[husbspamuel]

Hi

I was actually trying older versions and they were still failing.
I then thought about using beta 1.3.7.x

When I switched to this version the error disappeared.
It's still not working but the I can now see from I specting the page that the card is loading and the issue with "@" symbol is no longer reporting.