reopenWidget 오류 발생

개발
1

초보자용 디스코urs 테마 개발 가이드의 reopenWidget()을 이해하려고 시도하고 있습니다. 예제인 home-logo 스니펫으로 테마 컴포넌트를 만들려고 하면 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'offsetHeight') 오류가 발생하고 페이지 레이아웃이 깨집니다. reopenWidget 사용법에 변경 사항이 있었나요, 아니면 제가 놓치고 있는 것이 있나요?

2

문제가 있는 코드 부분을 공유해 주시겠어요?

3

그냥 이런 거예요:

<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>

초보자 가이드의 reopenWidget 섹션 예제에서 아무것도 바꾸지 않고 그대로 복사해서, 다른 내용이 없는 새로운 테마 컴포넌트에 붙여넣었습니다. (코드가 Header에 들어갔는지 다시 확인했습니다.)

다른 테마 컴포넌트 몇 개가 설치되어 있지만, home-logo에 영향을 미치는 것은 없습니다. 기본 호스팅을 사용 중인데, 이것이 영향을 줄 수 있을까요? 다크 로고를 업로드하지 않아서 그런 줄 알았는데, 다크 로고를 업로드해도 여전히 같은 문제가 발생합니다.

4

불행히도 여기서는 상황이 빠르게 변합니다.

기본적인 문제는 지침을 따르기보다 가이드에 있는 코드를 그대로 복사한 것 때문일 가능성이 높습니다.

방금 공유하신 코드와 현재 소스 코드를 비교해 보면 다음과 같습니다:

image
image1786×953 145 KB

즉, 매우 다릅니다! (따라서 오류가 발생할 가능성이 높습니다!)

지침에 따라 해야 할 일은 소스 코드로 가서 현재 코드를 복사한 뒤, 필요에 맞게 수정하는 것입니다.

즉, 가이드에 있는 코드는 구식이 된 반면, 지침은 여전히 유효합니다.

5

알겠습니다, 감사합니다! 저는 Discourse나 Ember를 처음 다뤄보는 것이라 아직 익숙해지려는 중입니다. 기존 소스에서 다른 함수를 복사해서 reopenWidget으로 시도해 보았지만 작동하지 않아서, 더 시도해 볼 예정입니다.