Custom Element doesn't exist: my-custom-card

Configuration Frontend
1

I’m trying to create my own custom card, but somehow I can’t get Home assistant to see the card as an actual card and I don’t know what I’m doing wrong.

So I followed the instruction and created a file in the /www folder called ‘my-custom-card.js’ with the following code:

class MyCustomCard extends LovelaceCard {
  setConfig(config) {
    if (!config) {
      throw new Error('Invalid configuration');
    }

    this.config = config;
    this.title = config.title || 'My Custom Card';
    // You can define your card's content and behavior here.
  }

  render() {
    // Render your card's content here using HTML or Lit HTML.
    const card = document.createElement('div');
    card.innerHTML = 'Hello, Custom Card!';
    return card;
  }
}

customElements.define('my-custom-card', MyCustomCard);

And added the resource in the UI as ‘/local/my-custom-card.js’ (I checked and the Javascript file is accessible through this link)

But if I try to add a new card to my lovelace dashboard it firstly doesn’t show up in the types list. And if I try to add it manualy is says:

Custom element doesn’t exist: my-custom-card

What am I doing wrong and how can I fix this?

2

Did you ever find a solution? I am having the same problem with a simple custom card I made.

3

I have this problem often - that should be a clue that I am not an expert on this - but two things I have done to try to fix it when it happens:

  1. Clear the cache in the browser, then do a reload through the UI on the dashboard

  2. Open the web tools in your browser and look at the console when you load it. If you have a javascript error, the result is the same… it does not think you have it.

It drove me mad at first, but the above typically addresses it for me.

1 Like
4

Full page reload (Ctrl-F5 on PC) did the trick for me, thanks!
I didn’t need to clear the cache.