Utilizzo di LightDarkImg genera un errore

Sviluppatore
1

Quando si utilizza <LightDarkImg />, ricevo un errore sconcertante che non fornisce alcuna indicazione effettiva sulla causa del problema.

Errore:

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

Il mio codice:

{{#if (and this.logoImg this.darkLogoImg)}}
  <div>
    <LightDarkImg
      @lightImg={{this.logoImg}}
      @darkImg={{this.darkLogoImg}}
    />
  </div>
{{/if}}

I metodi sono i seguenti:

  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; // Se non viene caricato alcun logo per la modalitĂ  scura, utilizza il logo normale
    } 
  }

Sto registrando tutto nel suddetto componente LightDarkImg (duplicato nel mio filesystem) e gli URL delle immagini vengono stampati correttamente. Vengono visualizzati correttamente anche quando sono all’interno di tag <img>.

Qualche idea? Grazie.

2

Puoi condividere l’intero file, comprese le importazioni?

Ti consiglierei di ridurre il codice un po’ alla volta finché non funziona. Ad esempio, l’errore proviene da {{#if? Da (and? O da uno dei getter?

1 Mi Piace
3

Nessun problema, ecco il file completo:

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

Proverò a fare il debug che hai suggerito, forse questo può dare qualche risultato.

4

Questo pezzo sembra sospetto. Racchiudere qualcosa tra parentesi in un template Ember lo fa trattare come un helper (cioè una funzione). Quindi penso che tu voglia rimuovere un livello di parentesi lì:

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

A proposito, stai sviluppando contro un’istanza di produzione qui? Se invece usi un’istanza di sviluppo, dovresti ottenere un messaggio di errore molto migliore.

2 Mi Piace
5

Grazie per il suggerimento. Funziona normalmente, su un altro branch :occhi:, ma lo farò comunque. Usando la produzione, passerò allo sviluppo e vedrò se aiuta.

1 Mi Piace
6

Huh, nessun altro errore dopo aver apportato quella modifica. Forse era quello. Grazie per l’aiuto; <LightDarkImg /> funziona benissimo ora!

1 Mi Piace
7

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