Error using {{didInsert}} in a connector component: “Class constructor DidInsertModifier cannot be invoked without 'new'”

[jahan_gagan]

Hi team,

I’m working on a custom theme component and trying to use a connector component via the plugin outlet kanban-card-bottom. Inside that connector component, I want to run DOM logic after render using the {{didInsert}} modifier.

However, as soon as I add {{didInsert this.modifyElement}} in the template, I get the following error in the browser console:

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

My component setup:

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

Goal:
I simply want to target a DOM element after render from this connector component (e.g., replace a username visually).

Any insights would be appreciated!

Error Screenshot

Thanks,

[david (David Taylor)]

It looks like there’s some code missing from your example? I’d expect to see a <template> / </template>, and for the modifier to be attached to an element like

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