[pnpm] How to deal with type error, claiming that tanstack-Types need to be referenced

[GregOnNet]

Hi together,

this issue seems to be related to pnpm.
I am wondering if some of you experienced the same problem, too.

The following error occurs, if I use UseQuery.

readPaged is a method querying data:

  readPaged(query: PagedQuery) {
    return this.useQuery({
      queryKey: [this.key, query],
      queryFn: () => this.http.get<Paged<...>>(`${this.endpoint}?${query.buildQueryString()}`)
    });
  }

This compiler error, does not break the build, but all type-information are lost.

Workaround

I could write an import to reference @tanstack+query-core, but whenever the version changes, my team and I would need to manually update these imports.

// Example import
import * as tanstackQuery from '.pnpm/@[email protected]/node_modules/@tanstack/query-core';

What are your thoughts on this?

[luii]

Can you provide a full list of dependencies that you use on your Project?
Can you provide a more elaborate example of the problem you're facing inside a repository for example?

[luii]

My best guess would be that TS is asking you for a type annotation on your readPaged function (e.g. maybe the return type).
Which in your case would be something like this:

I already gave advide on how to unwrap the token in here: #98 (comment)

class TestComponent {
  private readonly useQuery: UnwrapInjectionToken<typeof UseQuery> = inject(UseQuery);

  readPaged(query: PagedQuery): ReturnType<typeof this.useQuery<Paged<...>>> {
    return this.useQuery({
      queryKey: [this.key, query],
      queryFn: () => this.http.get<Paged<...>>(`${this.endpoint}?${query.buildQueryString()}`)
    });
  }
}

[GregOnNet]

Hi @luii ,

thanks for you help.
Sorry, I was not that accurate describing the problem, completely.

The Problem

1. The Compiler error shown in the Screenshot does not cause the build to break.
2. It “only” prevents the Editor from inferring the types, correctly.
3. This makes it nearly impossible to use the Service in the Component.

My Intention

I think the issue needs to be solved at "package-level".
We should not be forced to add additional typing unless we want to do it.

[GregOnNet]

✅ Solution found

• Make sure having the most recent version of @tanstack/query-core (4.33.0) & tslib (2.6.2) installed.
• For some reason in my project, older versions of those packages were installed.
• Updating tslib from 2.4.0 to 2.6.2 did the trick!

[GregOnNet]

I found the solution after setting up a brand new Angular Project and comparing the pnpm_lock.yaml-files of both projects.

[GregOnNet]

Hi,

it's me again. The guy having problems with pnpm. :-D

After installing @ngneat/[email protected] the error is back:

I took a look that the packag.json from @ngneat/query but was not able to find the dependency to @tanstack/query-core.

Maybe adding this as dependency would solve the problem. 🤔

[GregOnNet]

I installed @tanstack/[email protected] manually and the error is gone.

[GregOnNet]

👷🏻 Workaround
If anyone experiences the A type annotation is necessary.-Error, I would go for:

• Make sure having

  • the latest version of tslib is installed.
  • @tanstack/query-core added to dependencies of the project.

  pnpm install [email protected]
  pnpm install @tanstack/[email protected]