Silly question about creating a modifier using TypeScript and Glint

Hi all,

Ember.js newby here.

I have been working with TypeScript mostly, and I am starting a dummy todo project to get the hang of ember.js with TypeScript. I read the recommended way to typecheck templates is using Glint, which has been working fairly good so far.

I am having a strange issue when trying to define a modifier to be able to autofocus a text input when it is rendered in the screen. This is my code so far:

Todo.hsb - component where I call the modifier, which is called autofocus

  {{#if this.isEditing}}
    <form {{on 'submit' this.edit}}>
        <Input @value={{this.text}} {{autofocus}} />
      <button type='submit'>Save</button>
      <button type='button' {{on 'click' this.toggleEdit}}>Cancel</button>
    <button type='button' {{on 'click' this.toggleEdit}}>Edit</button>
    <button type='button' {{on 'click' this.remove}}>Delete</button>

autofocus.ts - modifier for autofocus

import { modifier } from 'ember-modifier';

interface AutofocusSignature {
  Element: HTMLElement;

const autofocus = modifier<AutofocusSignature>((element: HTMLElement) => {

export default autofocus;

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry {
    autofocus: typeof autofocus;

Error that I am getting when running glint for typechecking:

app/components/todo.hbs:5:39 - error TS2769: The given value does not appear to be usable as a component, modifier or helper.
  No overload matches this call.
    The last overload gave the following error.
      Argument of type 'FunctionBasedModifier<{ Element: HTMLElement; Args: { Named: EmptyObject; Positional: []; }; }>' is not assignable to parameter of type '(...positional: unknown[]) => unknown'.

5         <Input @value={{this.text}} {{autofocus}} />

    33 export declare function resolve<P extends unknown[], T>(
    The last overload is declared here.

error Command failed with exit code 1.

I have been trying to play around with AutofocusSignature Args, like setting Positional to unknown[], but it doesn’t seem to be helping.

Worth nothing that the modifier is working on my website, so it is only glint typechecking that is throwing the error.

Appreciate any help or ideas.



Hi Alejandro, apologies but it seems your post was auto-flagged as spam and it took me a couple days to run through the queue as I was away. Just wanted to let you know your post wasn’t being seen and ignored, it was hidden.

@aburto22 Are you by chance using ember-modifier 4.0? Glint currently has a known incompatibility with v4 and only currently works with v3.

I’m hopeful that the v4 issue should be relatively straightforward to resolve; most of the maintainers have just been (or still are) out for the holidays and/or tied up with other “work stuff” the past few weeks, so we have a bit of a backlog we’re just now starting to work through :slight_smile:

Thanks! I also saw a PR about adding helpers and modifiers helper, and assumed there were compatibility issues / was not fully functional. It is good to know that is related to ember-modifier 4.0 then.

Will keep an eye on the next couple of weeks to see if there is a fixing comming up.