커넥터 컴포넌트에서 {{didInsert}} 사용 시 오류: “Class constructor DidInsertModifier cannot be invoked without 'new'”

[jahan_gagan]

팀 여러분,

커스텀 테마 컴포넌트를 작업 중이며, 플러그인 아웃렛 kanban-card-bottom을 통해 커넥터 컴포넌트를 사용하려고 합니다. 해당 커넥터 컴포넌트 내부에서 렌더링 후 DOM 로직을 실행하기 위해 {{didInsert}} 모디파이어를 사용하고자 합니다.

그러나 템플릿에 {{didInsert this.modifyElement}}를 추가하는 즉시 브라우저 콘솔에서 다음 오류가 발생합니다:

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

제 컴포넌트 설정:

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

목표:
이 커넥터 컴포넌트에서 렌더링 후 DOM 요소를 타겟팅하는 것뿐입니다(예: 사용자 이름을 시각적으로 대체).

도움이 될 만한 통찰이 있다면 알려주시면 감사하겠습니다!

오류 스크린샷

감사합니다.

[david (David Taylor)]

예제에서 일부 코드가 누락된 것 같습니다. <template> / </template> 태그가 보일 것 같고, 수정자가 다음과 같은 요소에 연결되어 있을 것으로 예상합니다.

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