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?
סיכום מבוסס בינה מלאכותית
A user reports an error when using reopenWidget in a Discourse theme component, specifically with the home-logo widget, resulting in a TypeError related to offsetHeight. The issue stems from using outdated code from the Beginner’s Guide, which has since been updated. merefield clarifies that the guide’s example is no longer accurate and advises copying the current source code instead. The user, new to Discourse and Ember, acknowledges the guidance and plans to adjust their approach accordingly.
Do you mind sharing the piece of code you’re having issues with?
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.
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:
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.
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.