LightDarkImgの使用中にエラーが発生

NateDhaliwal · 2025 年 10 月 7 日午前 8:47

<LightDarkImg /> を使用している際に、問題の根本原因を全く示さない不可解なエラーが発生します。

エラー:

index.js:1755
Uncaught (in promise) TypeError: eC(...) is not a function
    at index.js:1755:48
    at index.js:64:37
    at X (index.js:416:5)
    at k (index.js:62:16)
    at index.js:1759:46
    at index.js:64:37
    at X (index.js:416:5)
    at k (index.js:62:16)
    at m.get (index.js:84:60)
    at Array Iterator.next (<anonymous>)
    at A.getValue (index.js:244:86)
    at index.js:222:52
    at index.js:64:37
    at X (index.js:416:5)
    at k (index.js:62:16)
    at index.js:1841:47
    at index.js:64:37
    at X (index.js:416:5)
    at k (index.js:62:16)
    at Object.evaluate (index.js:807:13)
    at Object.evaluate (index.js:103:106)
    at tr.evaluateSyscall (index.js:2873:20)
    at tr.evaluateInner (index.js:2852:64)
    at tr.evaluateOuter (index.js:2849:10)
    at tH.next (index.js:4167:45)
    at tH._execute (index.js:4157:21)
    at tH.execute (index.js:4133:41)
    at tj.handleException (index.js:3450:19)
    at tR.handleException (index.js:3592:52)
    at tF.throw (index.js:3414:16)
    at G.evaluate (index.js:565:42)
    at tF._execute (index.js:3401:34)
    at tF.execute (index.js:3393:17)
    at tU.rerender (index.js:3610:8)
    at tq.render (index-BCp6wOJU.js:4639:55)
    at index-BCp6wOJU.js:4934:16
    at eX (index.js:2414:7)
    at tG._renderRoots (index-BCp6wOJU.js:4914:7)
    at tG._renderRootsTransaction (index-BCp6wOJU.js:4962:12)
    at tG._revalidate (index-BCp6wOJU.js:4995:10)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at q._end (index.js:762:32)
    at q.end (index.js:565:10)
    at q._run (index.js:806:14)
    at q._join (index.js:783:19)
    at q.join (index.js:605:17)
    at Array.<anonymous> (index-BCp6wOJU.js:4728:26)
    at q._trigger (index.js:860:21)
    at q._end (index.js:775:16)
    at _boundAutorunEnd (index.js:499:12)

私のコード:

{{#if (and this.logoImg this.darkLogoImg)}}
  <div> class="category-logo aspect-image">
    <LightDarkImg
      @lightImg={{this.logoImg}}
      @darkImg={{this.darkLogoImg}}
    />
  </div>
{{/if}}

メソッドは以下の通りです:

  get logoImg() {
    if (settings.show_category_logo && this.args.category.uploaded_logo) {
      console.log(this.args.category.uploaded_logo.url);
      return this.args.category.uploaded_logo;
    } else if (
      settings.show_category_logo &&
      settings.show_parent_category_logo &&
      this.args.category.parentCategory &&
      this.args.category.parentCategory.uploaded_logo
    ) {
      return this.args.category.parentCategory.uploaded_logo;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    } else {
      return false;
    }
  }

  get darkLogoImg() {
    if (settings.show_dark_mode_category_logo && this.args.category.uploaded_logo_dark.url) {
      console.log(this.args.category.uploaded_logo_dark.url);
      return this.args.category.uploaded_logo_dark;
    } else if (
      settings.show_dark_mode_category_logo &&
      settings.show_parent_category_dark_mode_logo &&
      this.args.category.parentCategory &&
      this.args.category.parentCategory.uploaded_logo_dark
    ) {
      return this.args.category.parentCategory.uploaded_logo_dark;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    } else {
      return this.args.category.uploaded_logo; // ダークモードのロゴがアップロードされていない場合は、通常のロゴを使用します
    }
  }

前述の LightDarkImg コンポーネント（私のファイルシステムに複製したもの）で、すべてのものをログに記録していますが、画像 URL は正しく表示されます。<img> タグ内でも正しく表示されます。

何かアイデアはありますか？よろしくお願いします。

david · 2025 年 10 月 7 日午前 8:54

完全なファイル（インポートを含む）を共有していただけますか？

エラーが {{#if から来ているのか、(and から来ているのか、それともゲッターのいずれかから来ているのかなど、動作するまでコードを少しずつ削減することをお勧めします。

NateDhaliwal · 2025 年 10 月 7 日午前 8:55

問題ありません。こちらが完全なファイルです。

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { service } from "@ember/service";
import { htmlSafe } from "@ember/template";

import LightDarkImg from "discourse/components/light-dark-img";
import { ajax } from "discourse/lib/ajax";
import icon from "discourse/helpers/d-icon";

import { and, not } from "truth-helpers";

export default class CategoryHeader extends Component {
  @service siteSettings;
  @service site;

  @tracked full_category_description;

  constructor() {
    super(...arguments);
    this.getFullCatDesc();
  }

  get ifParentCategory() {
    if (this.args.category.parentCategory) {
      return true;
    }
  }

  get showCatDesc() {
    if (settings.show_category_description) {
      return true;
    }
  }

  get catDesc() {
    return this.args.category.description;
  }

  async getFullCatDesc() {
    try {
      let cd = await ajax(`${this.args.category.topic_url}.json`);
      this.full_category_description = cd.post_stream.posts[0].cooked;
    } catch {}
  }

  get showFullCatDesc() {
    if (settings.show_full_category_description) {
      return true;
    }
  }

  get logoImg() {
    if (settings.show_category_logo && this.args.category.uploaded_logo) {
      console.log(this.args.category.uploaded_logo.url);
      return this.args.category.uploaded_logo;
    } else if (
      settings.show_category_logo &&
      settings.show_parent_category_logo &&
      this.args.category.parentCategory &&
      this.args.category.parentCategory.uploaded_logo
    ) {
      return this.args.category.parentCategory.uploaded_logo;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    } else {
      return false;
    }
  }

  get darkLogoImg() {
    if (settings.show_dark_mode_category_logo && this.args.category.uploaded_logo_dark.url) {
      console.log(this.args.category.uploaded_logo_dark.url);
      return this.args.category.uploaded_logo_dark;
    } else if (
      settings.show_dark_mode_category_logo &&
      settings.show_parent_category_dark_mode_logo &&
      this.args.category.parentCategory &&
      this.args.category.parentCategory.uploaded_logo_dark
    ) {
      return this.args.category.parentCategory.uploaded_logo_dark;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    } else {
      return this.args.category.uploaded_logo; // If no dark mode logo is uploaded, use the normal logo
    }
  }

  get ifParentProtected() {
    if (
      this.args.category.parentCategory &&
      (
        this.args.category.parentCategory.permission === null ||
        this.args.category.parentCategory.read_restricted
      )
    ) {
      return true;
    }
  }

  get ifProtected() {
    if (
      this.args.category.permission === null ||
      this.args.category.read_restricted
    ) {
      return true;
    }
  }

  get lockIcon() {
    return settings.category_lock_icon || "lock";
  }

  get showHeader() {
    const isException =
      this.args.category &&
      settings.hide_category_exceptions
        .split("|")
        .includes(String(this.args.category.id));
    const hideMobile = !settings.show_mobile && this.site.mobileView;
    const subCat =
      !settings.show_subcategory_header && this.args.category.parentCategory;
    const noDesc =
      !settings.hide_if_no_category_description &&
      !this.args.category.description_text;
    const path = window.location.pathname;
    return (
      /^\\/c\\//.test(path) && !isException && !noDesc && !subCat && !hideMobile
    );
  }

  get getHeaderStyle() {
    let headerStyle = "";
    if (settings.header_style === "box") {
      headerStyle +=
        "border-left: 6px solid #" + this.args.category.color + ";";
    }
    if (settings.header_style === "banner") {
      headerStyle +=
        "background-color: #" +
        this.args.category.color +
        "; color: #" +
        this.args.category.text_color +
        ";";
    }
    if (settings.show_parent_category_background_image) {
      if (this.args.category.parentCategory) {
        if (
          settings.header_background_image !== "outside" &&
          this.args.category.parentCategory.uploaded_background
        ) {
          headerStyle +=
            "background-image: url(" +
            this.args.category.parentCategory.uploaded_background.url +
            ");";
        }
      } else if (this.args.category.uploaded_background) {
        if (settings.header_background_image !== "outside") {
          headerStyle +=
            "background-image: url(" +
            this.args.category.uploaded_background.url +
            ");";
        }
      }
    } else {
      if (this.args.category.uploaded_background) {
        if (settings.header_background_image !== "outside") {
          headerStyle +=
            "background-image: url(" +
            this.args.category.uploaded_background.url +
            ");";
        }
      }
    }
    return headerStyle + " display: block; margin-bottom: 1em;";
  }

  get aboutTopicUrl() {
    if (settings.show_read_more_link && this.args.category.topic_url) {
      return settings.read_more_link_text;
    }
  }

  get inlineReadMore() {
    return (settings.inline_read_more && (settings.show_category_description || settings.show_full_category_description) && settings.show_read_more_link);
  }

  <template>
    {{#if this.showHeader}}
      <div
        class="category-title-header category-banner-{{@category.slug}}"
        style={{this.getHeaderStyle}}
      >
        <div class="category-title-contents">
          {{#if (and this.logoImg this.darkLogoImg)}}
            <div class="category-logo aspect-image">
              <LightDarkImg
                @lightImg={{this.logoImg}}
                @darkImg={{this.darkLogoImg}}
              />
            </div>
          {{/if}}
          <div class="category-title-name" style={{if (not (this.logoImg)) "padding: 0 !important;"}}>
            {{#if this.ifParentCategory}}
              <a class="parent-box-link" href={{@category.parentCategory.url}}>
                {{#if this.ifParentProtected}}
                  {{icon this.lockIcon}}
                {{/if}}
                <h1>{{@category.parentCategory.name}}: </h1>
              </a>
            {{/if}}
            {{#if this.ifProtected}}
              {{icon this.lockIcon}}
            {{/if}}
            <h1>{{@category.name}}</h1>
          </div>

          <div class="category-title-description">
            {{#if this.showCatDesc}}
              <div class="cooked">
                {{htmlSafe this.catDesc}}
                {{#if this.inlineReadMore}}
                  <span class="category-about-url">
                    <a href={{@category.topic_url}}>{{this.aboutTopicUrl}}</a>
                  </span>
                {{/if}}
              </div>
            {{/if}}

            {{#if this.showFullCatDesc}}
              <div class="cooked">
                {{htmlSafe this.full_category_description}}
                {{#if this.inlineReadMore}}
                  <span class="category-about-url">
                    <a href={{@category.topic_url}}>{{this.aboutTopicUrl}}</a>
                  </span>
                {{/if}}
              </div>
            {{/if}}
          </div>
        </div>

        {{#unless this.inlineReadMore}}
          <div class="category-about-url">
            <a href={{@category.topic_url}}>{{this.aboutTopicUrl}}</a>
          </div>
        {{/unless}}
      </div>
    {{/if}}
  </template>
}

提案していただいたデバッグを試してみます。それで何らかの結果が得られるかもしれません。

david · 2025 年 10 月 7 日午前 9:16

この部分は怪しいですね。Emberテンプレートで括弧で囲むと、ヘルパー（つまり関数）として扱われます。そのため、括弧を1つ減らす必要があると思います。

- <div class="category-title-name" style={{if (not (this.logoImg))
+ <div class="category-title-name" style={{if (not this.logoImg)

ちなみに、ここで本番環境に対して開発していますか？開発インスタンスを使用すると、はるかに良いエラーメッセージが表示されるはずです。

NateDhaliwal · 2025 年 10 月 7 日午前 9:23

ヒントをありがとう。別のブランチでは正常に動作していますが、それでもそうします。本番環境を使用して、開発に切り替えて、それが役立つかどうかを確認します。

NateDhaliwal · 2025 年 10 月 7 日午前 10:41

なるほど、その変更を加えたらエラーは出なくなりました。それが原因だったのかもしれません。助かりました。<LightDarkImg /> は今、うまく動作しています！

system · 2025 年 11 月 6 日午前 10:41

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

トピック		返信	表示
How to fix light theme images in Dark mode for Modern Category Group Boxes UX dark-theme , air-theme	6	128	2025 年 1 月 18 日
Why is my community using the dark mode logo in light mode? Support	5	1025	2022 年 8 月 8 日
The dark mode site is using the logo from Light mode instead of Dark mode? Support	10	1473	2020 年 8 月 20 日
Dark mode logo doesn't work Support	7	111	2025 年 5 月 3 日
Selecting dark/light versions of category logos Support	3	622	2023 年 6 月 23 日

LightDarkImgの使用中にエラーが発生

関連トピック