reopenWidget throws error

dev
1

I’m trying to understand reopenWidget() from the Beginner’s Guide to Developing Discourse Themes and when I try to make a theme component with the example home-logo snippet, I get Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'offsetHeight') and it breaks the page layout. Has something changed with how to use reopenWidget or am I missing something?

1 Like
2

Do you mind sharing the piece of code you’re having issues with?

2 Likes
3

It’s just this:

<script type="text/discourse-plugin" version="0.8.13">
api.reopenWidget("home-logo", {
  logo() {
    const { siteSettings } = this,
      { iconNode } = require("discourse/helpers/fa-icon-node"),
      h = require("virtual-dom").h,
      altLogo = settings.Alternative_logo_url,
      altLogoSmall = settings.Alternative_small_logo_url,
      mobileView = this.site.mobileView,
      mobileLogoUrl = siteSettings.mobile_logo_url || "",
      showMobileLogo = mobileView && mobileLogoUrl.length > 0;
    (logoUrl = altLogo || ""),
    (title = siteSettings.title);
    if (!mobileView && this.attrs.minimized) {
      const logoSmallUrl = altLogoSmall || "";
      if (logoSmallUrl.length) {
        return h("img#site-logo.logo-small", {
          key: "logo-small",
          attributes: { src: logoSmallUrl, width: 33, height: 33, alt: title }
        });
      } else {
        return iconNode("home");
      }
    } else if (showMobileLogo) {
      return h("img#site-logo.logo-big", {
        key: "logo-mobile",
        attributes: { src: mobileLogoUrl, alt: title }
      });
    } else if (logoUrl.length) {
      return h("img#site-logo.logo-big", {
        key: "logo-big",
        attributes: { src: logoUrl, alt: title }
      });
    } else {
      return h("h1#site-text-logo.text-logo", { key: "logo-text" }, title);
    }
  }
});
</script>

Which I copied straight from the Beginner’s Guide example under reopenWidget without changing anything, into a new theme component with nothing else in it. (And double checked that I put the code into Header).

I have a few other theme components installed, but nothing that touches home-logo. I’m on basic hosting here if that makes a difference. I thought it might be because I didn’t have a dark logo uploaded, but it still happens even with a dark logo uploaded.

1 Like
4

Unfortunately things move fast around here.

The basic problem is probably that you’ve copied the code in the guide, rather than following the instructions.

This is a compare of the code you just shared with the current source code:

image
image1786×953 145 KB

ie very different! (and therefore likely to break!)

What you need to do (as per the instructions) is go to the source code and copy the current code and change that to suit your needs.

In other words, the code in the guide is out of date, if not the instructions, which are still valid.

2 Likes
5

Got it, thank you! This is my first time working with Discourse or Ember so I’m still getting a handle on it. I had tried doing reopenWidget with another function copied from current source and couldn’t get it to work, but I will fiddle some more.