PNP dependencies: Why isn't the same version used?

[amuttsch]

I'm currently investigating an issue using react-query with the react-query-persist-client package.

react-query is a regular dependency in the react-query-persist-client package.json.

When I use yarn why @tanstack/react-query in my example project, it resolves react-query twice:

yarn why @tanstack/react-query
├─ @tanstack/react-query-persist-client@npm:4.3.4
│  └─ @tanstack/react-query@npm:4.3.4 [e51bb] (via npm:4.3.4 [e51bb])
│
└─ react-query-test@workspace:.
   └─ @tanstack/react-query@npm:4.3.4 [7208f] (via npm:4.3.4 [7208f])

The issue is that react-query-persist-client creates a React context (for the non-react users: sth. like a global variable) provided by the @tanstack/react-query package. In my application I try to access this context, but it is empty.

After some debugging in the browser I found out that react-query was bundled twice in my application. The context is created in the react-query-persist-client instance ([e51bb] ID above), and when trying to access it from my application directly through the react-query package it accesses the [7208f] instance.

I cloned the react query repo and changed the dependency @tanstack/react-query inside the react-query-persist-client package to a peerDependency and that fixed the issue, now I have only one instance of @tanstack/react-query.

My question is why doesn't yarn pnp access the same instance of @tanstack/react-query? They have the same version specified and I don't see any differences. Is there some documentation that explains this behaviour? The manifest just states that plugin creators should use peerDependencies, but can also use regular ones.

Thanks!

[arcanis]

That's because of Virtual Packages. In short, @tanstack/react-query has peer dependencies - but because react-query-persist-client and your app provide different versions of those peer dependencies, then Node must instantiate the package twice, once for each provided set of peer dependencies.

When you turn @tanstack/react-query as a peer dep (which it should be; if something has a context, then it should almost never be a dependencies, because dependencies doesn't provide any guarantee that the instance is the same as anywhere else in the dependency tree, unlike peer deps), your app becomes the only @tanstack/react-query direct dependent, meaning that a single set of peer dependencies is now provided, so it only needs to be instantiated once.

[amuttsch]

Thanks for the reply. So every direct dependency of a package gets its own virtual package? Then I understand this, but you mentioned that react-query-persist-client and my app provide different versions. Do you mean the version number by that? Because the version number itself is the same (4.3.4).

[arcanis]

So every direct dependency of a package gets its own virtual package?

No, only packages that have have peer dependencies.

Do you mean the version number by that?

No, I meant the instances provided as peer dependencies. Check yarn info -AR @tanstack/react-query --virtuals, it will show you the different instances; you'll see they differ in which peer deps they are allowed to access.

[amuttsch]

Ahh okay, I think I understand it now. That explains why we have separate instances of the same package (version). And those virtual packages are then bundled with their respective peer dependencies, correct?

For those interested, here is the output for my project:

yarn info -AR @tanstack/react-query --virtuals
├─ @tanstack/react-query@npm:4.3.4
│  ├─ Instances: 2
│  ├─ Version: 4.3.4
│  │
│  └─ Dependencies
│     ├─ @tanstack/query-core@npm:4.3.4 → npm:4.3.4
│     └─ use-sync-external-store@npm:^1.2.0 → npm:1.2.0
│
├─ @tanstack/react-query@npm:4.3.4 [7208f]
│  ├─ Version: 4.3.4
│  │
│  └─ Peer dependencies
│     ├─ @types/react-dom@* → npm:18.0.6
│     ├─ @types/react-native@* → ✘
│     ├─ @types/react@* → npm:18.0.19
│     ├─ react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 → npm:17.0.2 [7208f]
│     ├─ react-native@* → ✘
│     └─ react@^16.8.0 || ^17.0.0 || ^18.0.0 → npm:17.0.2
│
└─ @tanstack/react-query@npm:4.3.4 [e51bb]
   ├─ Version: 4.3.4
   │
   └─ Peer dependencies
      ├─ @types/react-dom@* → ✘
      ├─ @types/react-native@* → ✘
      ├─ @types/react@* → ✘
      ├─ react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 → ✘
      ├─ react-native@* → ✘
      └─ react@^16.8.0 || ^17.0.0 || ^18.0.0 → ✘

[amuttsch]

And follow up question: Why isn't this a problem when using node_module resolution? Does the hoisting come into play here and it sees @tanstack/react-query-persist-client requires @tanstack/react-query and just uses it from the root node_modules? Or does it ignore the different peer dependency sets?

Because the issue is only present when using pnp.