Bubble Card not showing up after install (HACS)

[juliuswms]

Hello, I’ve been trying to install the Bubble Card for several days now without success. Below are the steps I’ve followed:

1. Installed Bubble Card using HACS.
2. Restarted Home Assistant.
3. Searched in the dashboard under "Add Card" for Bubble Card.
4. No result shows up (only the standard "Manual" option).

Troubleshooting Steps I’ve Tried:

• Installed different versions of the Bubble Card.
• Cleared cache.
• Tried using different browsers.
• Installed Bubble Card manually.
• Added the Bubble Card manually in the dashboard.

Despite these efforts, I’m still unable to add the Bubble Card. I’m wondering if there’s a way to enable logs for this integration to help diagnose the issue.

I really love the look of the Bubble Cards, so any help would be greatly appreciated! :)

System Information: Core: 2024.9.0 Supervisor: 2024.09.1 Operating System: 13.1 Frontend: 20240904.0 Browser: Chrome 128.0.6613.138

[Clooos]

Hi and thank you for your feedback. Can you tell me if you have installed the Dwains dashboard? The editor is not compatible with it, at least for now.

[juliuswms]

No, just the standard dashboard. I have other frontend integrations. Is one of them know to cause issues? Here’s what I have installed:

• button-card
• Bubble Card
• browser_mod
• card-mod
• layout-card
• Swipe Card

[Clooos]

Interesting 🤔

Can you check your browser console when you go in the editor? There should be some errors.

[juliuswms]

Yes, I'm getting the following errors: (I'm also seeing an SSL error, but that shouldn't affect the Bubble Card, right?)

I used to use the custom dashboard by matt8707. My Lovelace entry looks like this:

lovelace:
  mode: yaml  # use ui-lovelace.yaml
  resources:  # hacs
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module
    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module
    - url: /hacsfiles/swipe-card/swipe-card.js
      type: module
    - url: /local/light-popup-card.js
      type: module
    - url: /local/light-entity-card.js
      type: module

    - url: /local/bubble-pop-up-fix.ts
      type: module
    - url: /local/bubble-card.ts
      type: module

The installation of the dashboard was a bit messy because there wasn't a way to install everything automatically. Maybe that's what’s breaking the Bubble Card for me? I'm not deeply familiar with how Home Assistant operates, so I'm unsure if any of that could have an effect.

[elchininet]

Yes, I'm getting the following errors.

I am seeing that these modules have a TypeScript extension. Try to install the compiled files in dist instead of the source files in src.

[Clooos]

You need to remove this from your lovelace config:

    - url: /local/bubble-card.ts
      type: module

And for the fix you need it to be like this:

    - url: /local/bubble-pop-up-fix.js
      type: module

[juliuswms]

Hmm... still no luck: I changed the .ts to .js for the bubble-pop-up-fix and removed the bubble-card entry.

The www Bubble Card folder looks like this:

[juliuswms]

I finally found the solution. I reinstalled Bubble Card and manually removed any leftover files.

It seems the issue was caused by my dashboard being in YAML mode. This meant that the resource wasn’t automatically added after installing via HACS, and the path I was using was incorrect.

For me, it worked when I manually added the resource like this:

- url: /hacsfiles/Bubble-Card/bubble-card.js
  type: module

Thanks for all the help!