Error with custom lovelace card (MiFlora Flower Card by thomasloven)

Configuration Frontend
1

Hi all,

I’ve been trying to get this working for two weeks now, but to no avail. I have two MiFlora sensors that are reporting their values correctly to Home Assistant. I have configured these as two plant entities (plant.monstera_deliciosa and plant.howea_forsteriana) and both are reporting the correct values for humidity, brightness, moisture, etc…
I now want to display their current state using the custom card by thomasloven, but I keep getting a “Custom element doesn’t exist: flower-card.” error in Lovelace. I have searched the forums here, but I found only one topic where a faulty data.js file was at the source. However, the logs don’t show any related errors indicating data.js problems for me.

What I have done so far:

  • Configured the sensors and joined them through plant entitities (verified working)
  • Installed the custom card via HACS
  • The card is loaded via “config/lovelace/resources” just like my other custom cards that do work fine.

The yaml in Lovelace is:

entity: plant.howea_forsteriana
species: howea forsteriana
type: 'custom:flower-card'

I am running Home Assistant Core 0.107.6 on a RPi 4

Any suggestions on where I went wrong?

2

Hi,

I have the exact same problem. I have tried everything. Probably a bug with the latest update or whatever.

First to find out let the other knows :slight_smile:

3

It works now. Please update your HA to latest version.

4

I have the same problem, even HA is the latest!!

Custom element doesn't exist: flower-card.
5

same here… I installed a fork of this card but must be the same procedure. what did u put as ressource? /hacsfiles/lovelace-flower-card/… ?

mine looks like:

- url: /hacsfiles/lovelace-flower-card/flower-card.js
  type: module
6

I think I may have found a solution.
I noticed that my data.js wasn’t loading, thus we get this error.

In flower-card.js the location is hardcoded:

import {FlowerData} from '/local/lovelace-flower-card/data/data.js';

So I’ve changed it to point to the location I’ve installed it:

import {FlowerData} from '/local/community/lovelace-flower-card/data/data.js';

The image source should also be changed.

<img src="/local/community/lovelace-flower-card/data/images/${this.config.species}.jpg">

OR you simply install everything in /local/lovelace-flower-card/

This is my resources entry:

- url: /local/community/lovelace-flower-card/flower-card.js
  type: module
- url: /local/community/lovelace-card-tools/card-tools.js
  type: module

Hope it helps?

1 Like
7

I’m using this forked card: https://github.com/remkolems/lovelace-flower-card

Instructions are easy to follow: maybe you just really need to move/rename files.

8

Same here, it used to be working…

frontend javascript tried auto and latest, makes no difference which fixed the same issue with some other cards.

frontend:
  javascript_version: auto #latest

all the data including images and csv are there too
resource declaration is set properly

On this line there’s this error according to Chrome:
import {FlowerData} from '/local/lovelace-flower-card/data/data.js';

Error:
flower-card.js:1 Uncaught SyntaxError: Unexpected token {

From HomeAssistant log I see the following:

2020-06-25 00:35:31 ERROR (MainThread) [frontend.js.latest.202006033] http://192.168.0.222:8123/local/lovelace-flower-card/flower-card.js:1:8 Uncaught SyntaxError: Unexpected token {

gonna try switching everything to HACS and move the references within the modules as per suggested above.