Addon .gts Components Cannot Use Modifiers: "...does not appear to be usable as a component/modifier/helper"

[kdagnan]

I get this type error from Glint when trying to use an ember-modifier in a .gts component in my addon:

The given value does not appear to be usable as a component, modifier or helper.
  No overload matches this call.
    Overload 1 of 3, '(item: DirectInvokable): AnyFunction', gave the following error.
      Argument of type 'FunctionBasedModifier<{ Args: { Positional: [string]; Named: EmptyObject; }; Element: Element; }>' is not assignable to parameter of type 'DirectInvokable'.
    Overload 2 of 3, '(item: (abstract new () => InvokableInstance) | null | undefined): (...args: any) => any', gave the following error.
      Argument of type 'FunctionBasedModifier<{ Args: { Positional: [string]; Named: EmptyObject; }; Element: Element; }>' is not assignable to parameter of type 'abstract new () => InvokableInstance'.
        Property '[Invoke]' is missing in type 'FunctionBasedModifierInstance<{ Args: { Positional: [string]; Named: EmptyObject; }; Element: Element; }>' but required in type 'InvokableInstance'.
    Overload 3 of 3, '(item: ((...params: any) => any) | null | undefined): (...params: any) => any', gave the following error.
      Argument of type 'FunctionBasedModifier<{ Args: { Positional: [string]; Named: EmptyObject; }; Element: Element; }>' is not assignable to parameter of type '(...params: any) => any'.
        Type 'FunctionBasedModifier<{ Args: { Positional: [string]; Named: EmptyObject; }; Element: Element; }>' provides no match for the signature '(...params: any): any'.glint(2769)

I have created a minimal reproduction here: https://github.com/kdagnan/glint-gts-modifier-issue/blob/main/addon/src/components/broken-example.gts

I have also tried updating to ember-source@5.12 and using built-in types instead of the DT types. I cannot for the life of me figure out the issue. I have a new app that is working fine, I cannot figure out the issue for this addon.

[NullVoxPopuli]

Looks like the repo wants node 16?

Node 18 is probably the oldest LTS that you could use -- npm v10 reports a ton of EBADENGINE errors with Node 16.

I had issues recovering, so I deleted the lockfile.

But then I see there are other dependency errors

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: blocks-components@1.10.0-SNAPSHOT.0
npm error Found: @typescript-eslint/parser@6.21.0
npm error node_modules/@typescript-eslint/parser
npm error   dev @typescript-eslint/parser@"^6.20.0" from blocks-components@1.10.0-SNAPSHOT.0
npm error   addon
npm error     blocks-components@1.10.0-SNAPSHOT.0
npm error     node_modules/blocks-components
npm error       workspace addon from the root project
npm error
npm error Could not resolve dependency:
npm error peer @typescript-eslint/parser@"^5.0.0" from @typescript-eslint/eslint-plugin@5.62.0
npm error node_modules/@typescript-eslint/eslint-plugin
npm error   dev @typescript-eslint/eslint-plugin@"^5.59.8" from blocks-components@1.10.0-SNAPSHOT.0
npm error   addon
npm error     blocks-components@1.10.0-SNAPSHOT.0
npm error     node_modules/blocks-components
npm error       workspace addon from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error

Can you provide a minimal reproduction free from engines / dependency problems?

Thanks!

---

Additional things I noticed:

I noticed also that your root package.json doesn't have @glint/core or typescript. If you use VSCode, you'll need both of those packages in the root package.json.

So I tried with pnpm, and found that things work as expected:

[kdagnan]

Updated repo to address dependency issues and require Node 18.

You're right though, using pnpm i, it works as expected?? We're not ready to move to pnpm right now...any ideas what could be causing this ?

[NullVoxPopuli]

what npm version are you using?

[kdagnan]

I was able to get this resolved after a lot of trial and error in dependencies. Updating "@typescript-eslint/eslint-plugin", "@typescript-eslint/parser", and "ember-eslint-parser" to latest versions worked.

Thank you for your help

[NullVoxPopuli]

Some tools that may be able to help in the future:

• npx dep-hellp
  • a fork of npx are-my-node-modules-messed-up