Erro ao usar {{didInsert}} em um componente conector: “Não é possível invocar o construtor da classe DidInsertModifier sem 'new'”

[jahan_gagan]

Olá equipe,

Estou trabalhando em um componente de tema personalizado e tentando usar um componente conector através do plugin outlet kanban-card-bottom. Dentro desse componente conector, quero executar lógica DOM após a renderização usando o modificador {{didInsert}}.

No entanto, assim que adiciono {{didInsert this.modifyElement}} no template, recebo o seguinte erro no console do navegador:

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

Minha configuração de 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>
}

Objetivo:
Eu simplesmente quero direcionar um elemento DOM após a renderização a partir deste componente conector (por exemplo, substituir um nome de usuário visualmente).

Qualquer insight seria apreciado!

Captura de tela do erro

Obrigado,

[david (David Taylor)]

Parece que está faltando algum código no seu exemplo? Eu esperaria ver um <template> / </template>, e que o modificador fosse anexado a um elemento como

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