Cannot read properties of undefined (reading 'templates')

brhahlen commented 2 years ago

Bug report notice

Before you file a bug, make sure that you did not make a configuration mistake. The Swiss Army Knife in its current state does not yet have full configuration sanity checks!

So make sure your problem is not related to that!

[x] Yes, I'm sure that it is not a configuration mistake (at least, I think :) )

Bug description

Trying to use cards with the templates, throws the error in the title. For instance:

Cannot read properties of undefined (reading 'templates')
type: custom:swiss-army-knife-card
entities:
  - entity: sensor.tomorrow_io_home_tree_pollen_index
    name: Trees
  - entity: sensor.tomorrow_io_home_grass_pollen_index
    name: Grass
  - entity: sensor.tomorrow_io_home_weed_pollen_index
    name: Weed
layout:
  template:
    name: sak_layout_fce_tomorrow_pollen_all
    variables:
      - sak_layout_tomorrow_pollen_image_path: tomorrow/

Error in console:

ha-logbook.ts:42 

       card custom:swiss-army-knife-card TypeError: Cannot read properties of undefined (reading 'templates')
    at Object.h (swiss-army-knife-card.js:697:2772)
    at JSON.stringify (<anonymous>)
    at SwissArmyKnifeCard.setConfig (swiss-army-knife-card.js:697:3020)
    at a (ha-logbook.ts:42:1)
    at ha-logbook.ts:42:1
    at u (ha-logbook.ts:42:1)
    at d (ha-logbook.ts:42:1)
    at v (ha-logbook.ts:42:1)
    at r.value (hui-masonry-view.ts:44:1)
    at r.value (hui-masonry-view.ts:44:1)

To Reproduce

Good question...

I have installed Swiss Army Knife using the "Hybrid HACS" install. Meaning, installed via HACS, then downloaded the latest zip from GitHub, and unzipped. Copied all files from ha-config to the relevant directories, removing them first, and restarted HA. The dashboard was created via the UI of HA, not sure if that might be the problem, but would expect it to work by configuring via the UI as well.

Different folder structures:

[homeassistant] $ tree lovelace/
lovelace/
├── decluttering_templates
│   ├── decluttering_templates.yaml
│   ├── sak-arc180-sparklinebar24-tpl.yaml
│   ├── sak-arc180-sparklinebar24.yaml
│   ├── sak-divider-template-mw.yaml
│   ├── sak-header-template-mw.yaml
│   ├── sak-light-button-nm-tpl.yaml
│   ├── sak-light-button-tpl.yaml
│   └── sak-sensor-history-nm-tpl.yaml
├── resources
│   └── resources.yaml
├── sak_templates
│   ├── colorstops-template.yaml
│   ├── definitions
│   │   └── user-css-definitions.yaml
│   ├── sak_templates.yaml
│   └── templates
│       ├── colorstops
│       │   ├── colorstops-airvisual-template.yaml
│       │   ├── colorstops-battery-level-template.yaml
│       │   ├── colorstops-boiler-setpoint-blue-orange-template.yaml
│       │   ├── colorstops-boiler-water-blue-orange-template.yaml
│       │   ├── colorstops-energy-2kw.yaml
│       │   ├── colorstops-humidity-template.yaml
│       │   ├── colorstops-lux-template.yaml
│       │   ├── colorstops-pressure-template.yaml
│       │   ├── colorstops-temperature-inside-heating-template.yaml
│       │   └── colorstops-temperature-inside-template.yaml
│       ├── derived
│       │   └── derived-entity-brightness-template.yaml
│       ├── layouts
│       │   ├── sak-layout-fce-airvisual1.yaml
│       │   ├── sak-layout-fce-airvisual2.yaml
│       │   ├── sak-layout-fce-battery1a.yaml
│       │   ├── sak-layout-fce-battery1b.yaml
│       │   ├── sak-layout-fce-battery2.yaml
│       │   ├── sak-layout-fce-binary-alert1.yaml
│       │   ├── sak-layout-fce-binary-alert2.yaml
│       │   ├── sak-layout-fce-binary-alert3.yaml
│       │   ├── sak-layout-fce-binary-alert4.yaml
│       │   ├── sak-layout-fce-binary.yaml
│       │   ├── sak-layout-fce-clippath-test.yaml
│       │   ├── sak-layout-fce-environment.yaml
│       │   ├── sak-layout-fce-header.yaml
│       │   ├── sak-layout-fce-input-boolean.yaml
│       │   ├── sak-layout-fce-light-with-slider.yaml
│       │   ├── sak-layout-fce-light.yaml
│       │   ├── sak-layout-fce-navigate.yaml
│       │   ├── sak-layout-fce-person.yaml
│       │   ├── sak-layout-fce-power-outlet1.yaml
│       │   ├── sak-layout-fce-power-outlet2.yaml
│       │   ├── sak-layout-fce-power-outlet3.yaml
│       │   ├── sak-layout-fce-power-outlet4.yaml
│       │   ├── sak-layout-fce-scene.yaml
│       │   ├── sak-layout-fce-sensor1.yaml
│       │   ├── sak-layout-fce-sensor1a.yaml
│       │   ├── sak-layout-fce-sensor1b.yaml
│       │   ├── sak-layout-fce-sensor2.yaml
│       │   ├── sak-layout-fce-server-statistics.yaml
│       │   ├── sak-layout-fce-switch1.yaml
│       │   ├── sak-layout-fce-switch2.yaml
│       │   ├── sak-layout-fce-switch3.yaml
│       │   ├── sak-layout-fce-tomorrow-pollen-all-aqi.yaml
│       │   ├── sak-layout-fce-tomorrow-pollen-all.yaml
│       │   └── sak-layout-fce-tomorrow-pollen.yaml
│       ├── material3
│       │   ├── m3.yaml
│       │   ├── toolset-m3-mode-colors-template.yaml
│       │   ├── toolset-m3-palette-colors-template.yaml
│       │   └── toolset-m3-surface-colors-template.yaml
│       └── toolsets
│           ├── toolset-arc180-sparklinebar24-template.yaml
│           ├── toolset-electricity-delivered-returned-template.yaml
│           ├── toolset-light-button-nm-template.yaml
│           ├── toolset-light-button-slider-nm-template.yaml
│           ├── toolset-light-button-slider2-nm-template.yaml
│           ├── toolset-light-button-slider3-nm-template.yaml
│           ├── toolset-light-button-template.yaml
│           ├── toolset-segarc-icon-state-template.yaml
│           ├── toolset-sensor-history-template.yaml
│           ├── toolset-tutorial-01-part3-template.yaml
│           ├── toolset-tutorial-02-part1-template.yaml
│           └── toolset_light_button_nm.yaml
└── views
    ├── card-blank-card.yaml
    ├── sak-example-views
    │   ├── view-sake1-m3.yml
    │   ├── view-sake1.yml
    │   ├── view-sake10.yml
    │   ├── view-sake11-m3.yml
    │   ├── view-sake12-ani-m3.yml
    │   ├── view-sake12-m3.yml
    │   ├── view-sake2.yml
    │   ├── view-sake3.yml
    │   ├── view-sake4.yml
    │   ├── view-sake5.yml
    │   ├── view-sake6-m3.yml
    │   ├── view-sake6.yml
    │   ├── view-sake7.yml
    │   ├── view-sake8.yml
    │   ├── view-sake9.yml
    │   └── view-sake99-m3.yml
    └── sak-tutorial-views
        ├── view-functional-card-examples.yml
        ├── view-tutorial-01-part1.yml
        ├── view-tutorial-01-part2.yml
        ├── view-tutorial-01-part4.yml
        ├── view-tutorial-02-part1.yml
        └── view-tutorial-03-part1.yml

13 directories, 96 files

[homeassistant] $ tree www
www
├── afvalwijzer
├── community
│   ├── atomic-calendar-revive
│   ├── button-card
│   ├── circle-sensor-card
│   ├── decluttering-card
│   │   ├── decluttering-card.js
│   │   └── decluttering-card.js.gz
│   ├── history-explorer-card
│   ├── home-assistant-sun-card
│   ├── lovelace-auto-entities
│   ├── lovelace-card-mod
│   ├── lovelace-fold-entity-row
│   ├── lovelace-slider-entity-row
│   ├── lovelace-xiaomi-vacuum-map-card
│   ├── mini-graph-card
│   ├── mini-media-player
│   ├── power-distribution-card
│   ├── power-flow-card
│   ├── simple-thermostat
│   ├── stack-in-card
│   ├── swiss-army-knife-card
│   │   ├── SVGInjector.min.js
│   │   ├── SVGInjector.min.js.gz
│   │   ├── sak-css-definitions.yml
│   │   ├── sak-svg-definitions.yml
│   │   ├── sak_templates.yaml
│   │   ├── swiss-army-knife-card.js
│   │   └── swiss-army-knife-card.js.gz
│   └── zigbee2mqtt_networkmap
├── icons
│   ├── swiss-army-knife-b.svg
│   ├── swiss-army-knife-b128.png
│   ├── swiss-army-knife-b16.png
│   ├── swiss-army-knife-b24.png
│   ├── swiss-army-knife-b256.png
│   ├── swiss-army-knife-b32.png
│   ├── swiss-army-knife-b512.png
│   ├── swiss-army-knife-b64.png
│   ├── swiss-army-knife.svg
│   ├── swiss-army-knife128.png
│   ├── swiss-army-knife16.png
│   ├── swiss-army-knife24.png
│   ├── swiss-army-knife256.png
│   ├── swiss-army-knife32.png
│   ├── swiss-army-knife512.png
│   └── swiss-army-knife64.png
├── images
│   ├── airvisual
│   │   ├── ic-face-1.svg
│   │   ├── ic-face-2.svg
│   │   ├── ic-face-3.svg
│   │   ├── ic-face-4.svg
│   │   ├── ic-face-5.svg
│   │   └── ic-face-6.svg
│   ├── backgrounds
│   │   ├── balls-background-1.svg
│   │   └── balls-background-m3.svg
│   ├── dishwasher.jpg
│   ├── dryer.jpg
│   ├── ic-face-1.svg
│   ├── ic-face-2.svg
│   ├── ic-face-3.svg
│   ├── ic-face-4.svg
│   ├── ic-face-5.svg
│   ├── ic-face-6.svg
│   ├── svginjector
│   │   └── SVGInjector.min.js
│   ├── tomorrow
│   │   ├── pollen_grass_high.svg
│   │   ├── pollen_grass_low.svg
│   │   ├── pollen_grass_medium.svg
│   │   ├── pollen_grass_none.svg
│   │   ├── pollen_grass_very_high.svg
│   │   ├── pollen_grass_very_low.svg
│   │   ├── pollen_tree_high.svg
│   │   ├── pollen_tree_low.svg
│   │   ├── pollen_tree_medium.svg
│   │   ├── pollen_tree_none.svg
│   │   ├── pollen_tree_very_high.svg
│   │   ├── pollen_tree_very_low.svg
│   │   ├── pollen_weed_high.svg
│   │   ├── pollen_weed_low.svg
│   │   ├── pollen_weed_medium.svg
│   │   ├── pollen_weed_none.svg
│   │   ├── pollen_weed_very_high.svg
│   │   └── pollen_weed_very_low.svg
│   ├── washingmachine.jpg
│   └── weather
│       ├── clear-day.svg
│       ├── clear-night.svg
│       ├── cloudy-day.svg
│       ├── cloudy-night.svg
│       ├── cloudy.svg
│       ├── compass.svg
│       ├── drizzle.svg
│       ├── droplet.svg
│       ├── fog-day.svg
│       ├── fog-night.svg
│       ├── hail-day.svg
│       ├── hail-night.svg
│       ├── httpsbas.devprojectsweather-icons.txt
│       ├── lightning-day.svg
│       ├── lightning-night.svg
│       ├── lightning-rainy.svg
│       ├── partly-cloudy-day-drizzle.svg
│       ├── partly-cloudy-day-hail.svg
│       ├── partly-cloudy-day-rain.svg
│       ├── partly-cloudy-day-snow.svg
│       ├── partly-cloudy-day.svg
│       ├── partly-cloudy-night-drizzle.svg
│       ├── partly-cloudy-night-hail.svg
│       ├── partly-cloudy-night-rain.svg
│       ├── partly-cloudy-night-snow.svg
│       ├── partly-cloudy-night.svg
│       ├── partlycloudy-day.svg
│       ├── partlycloudy-night.svg
│       ├── partlycloudy.svg
│       ├── pouring-day.svg
│       ├── pouring-night.svg
│       ├── rain.svg
│       ├── rainy-day.svg
│       ├── rainy-night.svg
│       ├── snow.svg
│       ├── snowy-day.svg
│       ├── snowy-night.svg
│       ├── snowy-rainy-day.svg
│       ├── snowy-rainy-night.svg
│       ├── snowy-rainy.svg
│       ├── sunny-day.svg
│       ├── sunrise.svg
│       ├── sunset.svg
│       ├── thermometer.svg
│       ├── tornado.svg
│       ├── wind.svg
│       ├── windy-day.svg
│       ├── windy-night.svg
│       └── windy-variant.svg
└── pictures

31 directories, 170 files

[homeassistant] $ tree themes/
themes/
├── flt-01-brownish-light.yaml
├── google_theme
│   └── google_theme.yaml
├── m3-c01-red.yaml
├── m3-c02-volcano.yaml
├── m3-c03-orange.yaml
├── m3-c04-gold.yaml
├── m3-c05-yellow.yaml
├── m3-c06-lime.yaml
├── m3-c07-green.yaml
├── m3-c08-cyan.yaml
├── m3-c09-blue.yaml
├── m3-c10-geekblue.yaml
├── m3-c11-purple.yaml
├── m3-c12-magenta.yaml
├── m3-d01-purple.yaml
├── m3-d02-cadmiumgreen.yaml
├── m3-d03-porcupine.yaml
├── m3-d04-magenta.yaml
├── m3-d05-brown.yaml
├── m3-d06-tealblue.yaml
├── m3-d07-darkolivegreen.yaml
├── m3-d08-red.yaml
├── m3-d09-indigo.yaml
├── m3-d10-green.yaml
├── nm-01-gonsboro.yaml
├── nm-02-steelblue.yaml
├── nm-03-dark-steelblue.yaml
└── slate.yaml

1 directory, 28 files

[homeassistant] $ cat ui-lovelace.yaml
#################################################################
#                                                               #
#             Home Assistant Lovelace configuration             #
#                                                               #
#             Created: 2020.09.20                               #
#                                                               #
#             Required setup for Swiss Army Knife               #
#                                                               #
#################################################################

# Decluttering Templates
decluttering_templates:
  !include lovelace/decluttering_templates/decluttering_templates.yaml

# Swiss Army Knife Templates
#
# The system templates come with the HACS install and can be updated
# with a new release. That part is automatic!
sak_sys_templates:
  !include www/community/swiss-army-knife-card/sak_templates.yaml

# The user templates are created by the user, and won't be updated
# with a new release. If changes are required, then the user has to
# upate the template configuration files.
sak_user_templates:
  !include lovelace/sak_templates/sak_templates.yaml

[homeassistant] $ cat configuration.yaml
homeassistant:
[removed for brevity]
lovelace:
  mode: storage
  resources: !include lovelace/resources/resources.yaml
# Add yaml dashboards
  dashboards:
    sak-examples:
      mode: yaml
      filename: sak-examples-dashboard.yaml
      title: Swiss Army Knife Examples
      icon: mdi:hospital-box
      show_in_sidebar: true
    sak-tutorials:
      mode: yaml
      filename: sak-tutorials-dashboard.yaml
      title: Swiss Army Knife Tutorials
      icon: mdi:hospital-box
      show_in_sidebar: true

Expected behavior

I expect it to work :)

Screenshots

Desktop browser (please complete the following information):

OS: Windows 11 Insider
Browser: Microsoft Edge
Version 103.0.1264.71 (Official build) (64-bit)

Companion App on Smartphone/Tablet (please complete the following information):

Device: Google Pixel 6 Pro
OS: Android
Browser: Edge
Version: Latest

Additional context I think that's about it. If you need more information, please let me know.

github-actions[bot] commented 2 years ago

Thank you for creating your first issue for the Swiss Army Knife custom card!

novisys commented 2 years ago

This kind of problem is related to ressources files, add it directly from the dashboard ressourses can resolve the problem

brhahlen commented 2 years ago

@novisys Thanks. As far as I can tell, the resources files are added in the dashboard

novisys commented 2 years ago

Have you reffered to this step by step instalation guide ? https://swiss-army-knife-card-manual.amoebelabs.com/start/installation/#hybrid-install-using-hacs-custom

brhahlen commented 2 years ago

Yes, otherwise I wouldn't be able to see the card at all.

brhahlen commented 1 year ago

After upgrading to 2022.8 of HA it worked! ...and then it didn't again... :(

So, it appears the backend should be alright... but for some reason...

AmoebeLabs commented 1 year ago

That is very weird, as if the backend can’t load the data for some reason.

i haven’t found any cause yet. It works on my end, so difficult to reproduce.

what kind of hardware are you running?

brhahlen commented 1 year ago

Sorry, am on holiday, so spending a lot less time at the computer/phone. I'm running HA in Docker, on x86_64 hardware.

I'll get the full list to you soon :-)

brhahlen commented 1 year ago

CPU: Intel(R) Pentium(R) CPU G4560 MainBoard: H110M-STX RAM: 16GB SSD: Samsung NVME 970

Anything else you need to know?

brhahlen commented 1 year ago

@AmoebeLabs I'm running it on docker-compose, if that helps any. Not sure where/how to test more, it just seems a bit weird that it doesn't work, and I can't pinpoint why...

Do you have any suggestions on debugging steps?

fabiobrolo commented 1 year ago

I´m having the same issue. I´ve installed using HACS and not using YAML mode.

mcrummett commented 1 year ago

Same issue here for me too. Really randomly too. I.e. it will start working and then stop again even without making any changes or restarting Home Assistant.

brhahlen commented 1 year ago

@mcrummett Did you also install using HACS?

tschoiss commented 1 year ago

Same issue here. I installed with according to the hybrid method and tried to go through the tutorials and with the given files. Everything works (e.g. tutorial 1 part 1/2) until I try it with the templates (e.g. tutorial 1 part 3/4).

brhahlen commented 1 year ago

So I've tried to "switch" to the fully custom install, but that also doesn't work. I think it has to do with the dashboards being in storage mode, but am not entirely sure.

I'll leave it for now, and see what's going on later. @AmoebeLabs If you need more help testing, let me know.

halfpastfouram commented 1 year ago

Same problem here with HACS. HASS is installed in VM on unraid.

PeterGrace commented 1 year ago

I am also experiencing this on 2022.9.7 -- @brhahlen mentioned that this might be related to using a storage mode dashboard, so I converted to yaml mode and loaded the example dashboards and any of the installed views that utilize a template produce the same error, see figure 1. I installed 1.0.0-rc3 via the hacs add-on, originally into a mode: storage install, which I converted to a yaml mode install by manually copying over all of my resource definitions from the ui. Its worth noting that the visualizations that don't use templates do seem to render, at least partially (see figure 2)

sfstar commented 1 year ago

Can concur that the issue is related to storage mode. I made a test dashboard via the ui in storage mode and copied it's contents to a dashboard yaml file that was referenced in an commented lovelace: mode: yaml configuration entry. When storage mode is enabled the exact same dashboard definition doesn't work. However, if yaml mode is enabled, the exact same dashboard definition works after a refresh of the browser.

Switching back to storage mode without refreshing (but with restarting HA in another window) ensures that the dashboard also works in the ui controlled dashboard. Unlike the yaml mode the dashboard in storage mode will only keep working until the browser is refreshed. Therefore I believe that, in storage mode, somewhere along the reference chain there is a broken path reference to the example templates files.

Since, everything works without a refresh after switching to yaml and back but with a refresh (which probably causes the template files to be re-requested) the broken path becomes evident.

PeterGrace commented 1 year ago

hi @sfstar, my installation is currently in yaml mode (not storage mode) and the example dashboard screenshots I pasted above are from a yaml mode dashboard, so my experience diverges from your explanation.

PeterGrace commented 1 year ago

I was able to resolve the template error by going into chrome developer mode and keep fixing the issues as they were identified. Keep in mind that my f12-based errors could be unrelated, but one of these things fixed it:

ensure mushroom card is installed
ensure thomasloven/lovelace-card-mod is turned on as an 'extra frontend module'
ensure that I'm only using the latest copy of weather-card
(I think this has something to do with it) -- error on console about unable to find svg-injector.map.js in dist/ folder (#168) -- I downloaded the svg-injector.map.js from the svg-injector project and put it in the specified location.

At this point, I am no longer getting template errors, but I've gotten a separate error that I'll create a new issue for.

mikelauritsen commented 1 year ago

I have the same problems as described here. Installed in storage mode, the cards worked at first, but after restarting HA I got the "Cannot read properties of undefined (reading 'templates')" error. I also noticed that only some of the cards on the "sak-example-dashboard" was working. I tried all the steps posted by @PeterGrace, but that didn't solve the issue for me. The strange thing is that the cards has been working a couple of times, but then the error is back. These cards are really nice looking and adds a lot of customization, so I would really love to use them - but it seems that there are some issues that needs to be resolved first.

Edit: Discovered something interesting. I changed one of the template !include in "sak-examples-dashboard.yaml" to something not valid (added / in front of the path), then saved the file and refreshed the dashboard page (sak-examples/sak3). Then the error message was gone (the example dasbhoard doesn't show all card info, but the error is gone), and my SAK cards added via UI is working as expected. After a new refresh, the error is back.

My card added via UI before changing sak-example-dashboard.yaml:

Example dashboard before changing sak-example-dashboard.yaml:

Added an error to the path in sak-example-dashboard.yaml:

Stored the file, refreshed Lovelace dashboard, removed the error in the path, stored the file and refreshed Lovelace dashboard:

Example dashboard after changing sak-example-dashboard.yaml:

My card added via UI after changing sak-example-dashboard.yaml:

After another refresh of the dashboard, the errror is back.

Edit2: I think this issue is related to the fact that storage mode doesn't use ui-lovelace.yaml and the raw editor doesn't support includes. So as far as I know there is no way to add the templates that are included in ui-lovelace.yaml in storage mode. The temporary "solution" mentioned above seems to only be a browser cache, since the templates are loaded when YAML mode dashboard is loaded, but the included templates seems to get removed when the storage mode dashboard is refreshed. I don't know if this is the answer - this is way outside my knowledge - but it seems that everything is working as intented when using YAML dashboards and including the templates as described in the documentation. So, unless there is a way to include the templates in storage mode, I don't think this will work.

servilad commented 1 year ago

Please help the developers. The same problem happened. Performed the installation according to the scheme indicated on the site. Hardware configuration (Windows 10, Chrome). In the configuration file (lovelace, mode: yaml). Here's an observation: I'm using a lovelace created by a graphic editor (not YAML), if I refresh the browser page on the lovelace tab (created by a graphic editor) then an error appears (Cannot read properties of undefined (reading 'templates'), but if I refresh the browser page on the lovelace page created via yaml, and then go to the lovelace (graphic editor) page, then this page displays the information correctly.but it does not work on the mini pc RPI3 ( OS Raspbian)

vbokaty commented 1 year ago

Hi how to solve the problem?

Symbiot78 commented 1 year ago

I had the same.. reason was that I had this line (from the manual)

!include include/sak/sak_templates.yaml

I changed that to this:

!include lovelace/sak_templates/sak_templates.yaml

then it worked. (I got the same error just with reading: state.. but changed the entity in the example to something that existed.. then all was well.

AmoebeLabs / swiss-army-knife-card