Settings Page Broken Due To Changes in ha-data-table Custom Element

[Nerwyn]

Fix instructions for users

As found by others below:

1. Open the file custom_components/browser_mod/browser_mod_panel.js on your Home Assistant instance.
2. Search for the ha-data-table element in the file and add the attribute .hass=${this.hass} to it. It should look something like <ha-data-table .hass=${this.hass}...
3. Delete custom_components/browser_mod/browser_mod_panel.js.gz.
4. Restart Home Assistant.

My Home Assistant version: 2024.7.1
Frontend: 2024.0705.0

What I am doing:
Opening the browser mod settings page.

What I expected to happen:
Entire page should load without errors

What happened instead:
All of the Frontend Settings dropdowns do not load their content (sidebar order loads partial content). This seems to have been introduced in 2024.7.1, as it was working in 2024.7.0.

Here is the line in the PR which broke it. You need to either provide a localize function or the hass object when using ha-data-table.

Minimal steps to reproduce:

1. Install browswer-mod via HACS.
2. Open developer tools console.
3. Open the browser-mod settings page via the sidebar. Note the repeated errors.
4. Scroll to the bottom of the page and expand the frontend settings dropdowns. Note how most of them are empty and/or missing content.

NA

Error messages from the browser console:
This error repeasts 30+ times per render.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'localize')
    at i.value (ha-data-table.ts:323:53)
    at i.update (lit-element.ts:160:24)
    at i.performUpdate (reactive-element.ts:1329:14)
    at i.scheduleUpdate (reactive-element.ts:1261:17)
    at i._$Ej (reactive-element.ts:1233:25)

---

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[shogun168]

Also getting the same issue here.

[thomasmaxson]

Same issue here. Thanks for reporting.

[ha-dudu]

hello, same issue here

[jleach87]

+1

[okleinschmidt]

I was able to fix this with some help of ChatGPT, open custom_components/browser_mod/browser_mod_panel.js and change

      <ha-data-table .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}} .data=${this.tableData} auto-height>
      </ha-data-table>

to:

      <ha-data-table .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}}   .data=${this.tableData}
      .localizeFunc=${(this.localizeFunc || (this.hass && this.hass.localize) || (() => ''))} auto-height>
      </ha-data-table>

be aware of your browser cache, I had to restart home assistant a few times as well as reload the browser window a few times.

[lbouriez]

Getting the same error but the fix doesn't work on my case :(

Edit: After many reload fix works for me

[Midifreakz]

+1 >> Fix also did not work

[remmob]

Fix did work for me

[MikOsle]

+1 , fix does not work for me.

[genehand]

Here's my fix, adding the hass object to the same line in browser_mod_panel.js from @Nerwyn's other suggestion:

<ha-data-table .hass=${this.hass} .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}} .data=${this.tableData} auto-height>

[AndrewSteel]

+1 >> both fix does not work for me.

[okleinschmidt]

be aware of your browser cache, I had to restart home assistant a few times as well as reload the browser window a few times.

Again, for all those, for whom the fix does not work. 😊 maybe try another browser, private window etc.

[AndrewSteel]

Again, for all those, for whom the fix does not work. 😊 maybe try another browser, private window etc.

You are right, a new browser instance has helped.

[benedettidev]

The fix is not working for me.
I tried restarting several times and clearing the browser cache but nothing.

[lbouriez]

Can you try in private navigation ? It was not working for me but eventually worked :)

[benedettidev]

Nothing, not even in private.
Now my code is like this:

      <ha-data-table .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}}   .data=${this.tableData}
      .localizeFunc=${(this.localizeFunc || (this.hass && this.hass.localize) || (() => ''))} auto-height>
      </ha-data-table>

But I still have this error in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'localize')
    at i.value (ha-data-table.ts:627:53)

[JRDevo]

The fix is not working for me. I tried restarting several times and clearing the browser cache but nothing.

Same here, tried both fixes and each time I completely rebooted the HASS Pi then used a private window in both brave and edge browsers. Same error :(

HASS is on a Pi4

[AndrewSteel]

In my response to @okleinschmidt I wrote that it is now working for me.

In extension to this message: I used the change from @genehand and not only restarted HASS but also restarted my PI 4 and closed all open browser instances.

After that the error was fixed.

[okleinschmidt]

@lbouriez, @JRDevo thats really strange. Are you using some kind of caching proxy e.g. Nginxreverseproxy? There also should be a gzipped version of the file in the same directory, maybe delete that. I wrote maybe, because I only deleted it in my hass-dev, but my hass-prod works without deleting the .gz.

Responses may delay, I'm on vacation for the next 5 days.

[JRDevo]

@lbouriez, @JRDevo thats really strange. Are you using some kind of caching proxy e.g. Nginxreverseproxy? There also should be a gzipped version of the file in the same directory, maybe delete that. I wrote maybe, because I only deleted it in my hass-dev, but my hass-prod works without deleting the .gz.

Responses may delay, I'm on vacation for the next 5 days.

No stress, any help is great!

I only use an Ad guard DNS server otherwise everything is standard.

[lbouriez]

@lbouriez, @JRDevo thats really strange. Are you using some kind of caching proxy e.g. Nginxreverseproxy? There also should be a gzipped version of the file in the same directory, maybe delete that. I wrote maybe, because I only deleted it in my hass-dev, but my hass-prod works without deleting the .gz.

Responses may delay, I'm on vacation for the next 5 days.

Hello, yes in my case the issue was CloudFlare, as soon as I used the private IP, refreshing thebcashe worked perfectly

[rddelacosta]

I was able to fix this with some help of ChatGPT, open custom_components/browser_mod/browser_mod_panel.js and change

      <ha-data-table .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}} .data=${this.tableData} auto-height>
      </ha-data-table>

to:

      <ha-data-table .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}}   .data=${this.tableData}
      .localizeFunc=${(this.localizeFunc || (this.hass && this.hass.localize) || (() => ''))} auto-height>
      </ha-data-table>

be aware of your browser cache, I had to restart home assistant a few times as well as reload the browser window a few times.

this worked for me, thank you :)

[EvgenyBash]

It's not working for me either.

[mattjes04]

Deleting the browser_mod_panel.js.gz as @okleinschmidt mentioned did the trick for me. Before it wasn't working. I used the substitution from @genehand

Thanks a lot. Browser Mod is working againg!

[benedettidev]

@mattjes04 that did the trick! Thanks!

[JRDevo]

Using:

Here's my fix, adding the hass object to the same line in browser_mod_panel.js from @Nerwyn's other suggestion:

<ha-data-table .hass=${this.hass} .columns=${{name:{title:"Name",grows:!0},value:{title:"Value",grows:!0},controls:{}}} .data=${this.tableData} auto-height>

and deleting the browser_mod_panel.js.gz worked for me too, thanks :) :)

Deleting the browser_mod_panel.js.gz as @okleinschmidt mentioned did the trick for me. Before it wasn't working. I used the substitution from @genehand

Thanks a lot. Browser Mod is working againg!

[okleinschmidt]

Nice to read that the fix is working for you guys now :) I'm sorry I forgot the .gz first.

[kobraevents]

Same Problem here, nothing of the code changings work. but i noticed that my desktop pc is running very very high an CPU load when opening the browser mod table settings.

[mnneely]

The fix worked for me in a browser (Safari, iOS) but did not work in the companion app (again, iOS) until I took the extra step of resetting the frontend cache in the app.

Settings > Companion App > Debugging > Reset frontend cache. Then close and re-open the app.

[mattjes04]

The fix worked for me in a browser (Safari, iOS) but did not work in the companion app (again, iOS) until I took the extra step of resetting the frontend cache in the app.

Settings > Companion App > Debugging > Reset frontend cache. Then close and re-open the app.

Works perfectly well! Thank you!

[dinki]

The big question is will BM get updated at some point? Today it is this problem but we have another release in a week or so that could break other things. Has this project grown stale? Do alternatives exist?

[okleinschmidt]

The big question is will BM get updated at some point? Today it is this problem but we have another release in a week or so that could break other things. Has this project grown stale? Do alternatives exist?

That's what I asked myself. Maybe @thomasloven can give us some updates here?

[Alfiegerner]

Fix advice can maybe be merged into repository like #716.