Errore nell'uso di {{didInsert}} in un componente connettore: "Impossibile invocare il costruttore della classe DidInsertModifier senza 'new'"

[jahan_gagan]

Ciao team,

Sto lavorando su un componente tema personalizzato e sto cercando di utilizzare un componente connettore tramite l’outlet del plugin kanban-card-bottom. All’interno di quel componente connettore, voglio eseguire logica DOM dopo il rendering utilizzando il modificatore {{didInsert}}.

Tuttavia, non appena aggiungo {{didInsert this.modifyElement}} nel template, ottengo il seguente errore nella console del browser:

Uncaught (in promise) TypeError: Class constructor DidInsertModifier cannot be invoked without 'new'
    at FunctionHelperManager.getValue (index.js:214:86)

La mia configurazione del componente:

// javascripts/discourse/connectors/kanban-card-bottom/replace-last-post-by.gjs
import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";

export default class ReplaceLastPostBy extends Component {
  @action
  modifyElement(element) {
    console.log("Element ====> ", element);
  }

  <template>
    {{didInsert this.modifyElement}}
  </template>
}

Obiettivo:
Voglio semplicemente puntare a un elemento DOM dopo il rendering da questo componente connettore (ad esempio, sostituire visivamente un nome utente).

Qualsiasi intuizione sarebbe apprezzata!

Screenshot dell'errore

Grazie,

[david (David Taylor)]

Sembra che manchi del codice nel tuo esempio? Mi aspetterei di vedere un <template> / </template>, e che il modificatore sia collegato a un elemento come

<template>
  <div {{didInsert this.modifyElement}}>
    ...
  </div>
</template>