Repository navigation
Addon .gts Components Cannot Use Modifiers: "...does not appear to be usable as a component/modifier/helper" #774
Description
Activity
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 errorCan 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/coreortypescript. 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:
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 ?what npm version are you using?
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
Some tools that may be able to help in the future:
npx dep-hellp- a fork of
npx are-my-node-modules-messed-up
- a fork of
Reacted by Kyle D.I got the same error with glint
1.4.1-unstable.6e222ffwith when used with ember-headless-table modifiers:app/components/activity-report.gts:834:18 - error TS2769: No overload matches this call. Overload 1 of 3, '(item: DirectInvokable): AnyFunction', gave the following error. Argument of type 'FunctionBasedModifier<{ Args: { Named: Record<string, unknown>; Positional: unknown[]; }; Element: HTMLElement; }>' 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: { Named: Record<string, unknown>; Positional: unknown[]; }; Element: HTMLElement; }>' is not assignable to parameter of type 'abstract new () => InvokableInstance'. Property '[Invoke]' is missing in type 'FunctionBasedModifierInstance<{ Args: { Named: Record<string, unknown>; Positional: unknown[]; }; Element: HTMLElement; }>' 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: { Named: Record<string, unknown>; Positional: unknown[]; }; Element: HTMLElement; }>' is not assignable to parameter of type '(...params: any) => any'. Type 'FunctionBasedModifier<{ Args: { Named: Record<string, unknown>; Positional: unknown[]; }; Element: HTMLElement; }>' provides no match for the signature '(...params: any): any'. 234 <table {{this.table.modifiers.container}} class='table-fixed w-fit min-w-full'> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ node_modules/.pnpm/@glint+template@1.4.1-unstable.6e222ff/node_modules/@glint/template/-private/integration.d.ts:22:72 22 export type InvokableInstance<T extends AnyFunction = AnyFunction> = { [Invoke]: T }; ~~~~~~~~ '[Invoke]' is declared here. app/components/activity-report.gts:839:21 - error TS2769: No overload matches this call. Overload 1 of 3, '(item: DirectInvokable): AnyFunction', gave the following error. Argument of type 'FunctionBasedModifier<{ Args: { Named: Record<string, unknown>; Positional: [Column<NodeEdge>]; }; Element: HTMLElement; }>' 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: { Named: Record<string, unknown>; Positional: [Column<NodeEdge>]; }; Element: HTMLElement; }>' is not assignable to parameter of type 'abstract new () => InvokableInstance'. Property '[Invoke]' is missing in type 'FunctionBasedModifierInstance<{ Args: { Named: Record<string, unknown>; Positional: [Column<NodeEdge>]; }; Element: HTMLElement; }>' 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: { Named: Record<string, unknown>; Positional: [Column<NodeEdge>]; }; Element: HTMLElement; }>' is not assignable to parameter of type '(...params: any) => any'. Type 'FunctionBasedModifier<{ Args: { Named: Record<string, unknown>; Positional: [Column<NodeEdge>]; }; Element: HTMLElement; }>' provides no match for the signature '(...params: any): any'. 239 {{this.table.modifiers.columnHeader column}}
npx dephellpdid not return any relevant conflicts.Neither did this help, as I don't have any of these packages:
updating "@typescript-eslint/eslint-plugin", "@typescript-eslint/parser", and "ember-eslint-parser" to latest
However, overriding ember-headless-table's
ember-modifierdid the trick:"overrides": { "ember-modifier": "^4.2.0" }- added a commit that references this issue
on Apr 11, 2025
I get this type error from Glint when trying to use an ember-modifier in a .gts component in my addon:
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.