Usar LightDarkImg lanza un error

Desarrollador
1

Al usar <LightDarkImg />, obtengo un error desconcertante que no indica la causa del problema.

Error:

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)

Mi código:

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

Los métodos son los siguientes:

  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; // Si no se carga un logo en modo oscuro, usa el logo normal
    } 
  }

Estoy registrando todo en el componente LightDarkImg mencionado (duplicado en mi sistema de archivos), y las URL de las imágenes se imprimen correctamente. Incluso se muestran correctamente cuando están en etiquetas <img>.

¿Alguna idea? Gracias.

2

¿Puedes compartir el archivo completo, incluidas las importaciones?

Recomendaría reducir el código poco a poco hasta que funcione. por ejemplo, ¿proviene el error de {{#if? ¿El (and? ¿O uno de los getters?

1 me gusta
3

No hay problema, este es el archivo 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; // Si no se carga un logo en modo oscuro, usa el logo normal
    }
  }

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

Intentaré hacer la depuración que sugeriste, quizás eso arroje algunos resultados.

4

Este fragmento parece sospechoso. Envolver algo entre paréntesis en una plantilla de Ember hace que se trate como un helper (es decir, una función). Así que creo que quieres quitar un nivel de corchetes ahí:

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

Por cierto, ¿estás desarrollando contra una instancia de producción aquí? Si usas una instancia de desarrollo en su lugar, deberías obtener un mensaje de error mucho mejor.

2 Me gusta
5

Gracias por el consejo. Funciona normalmente, en otra rama :ojos:, pero lo haré de todos modos. Usando producción, cambiaré a desarrollo y veré si eso ayuda.

1 me gusta
6

Vaya, ya no hay ningún error después de hacer ese cambio. Quizás era eso. Gracias por la ayuda; <LightDarkImg /> funciona muy bien ahora.

1 me gusta
7

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