Missing dependency on react-dom leads to runtime errors when using yarn berry

[SoftMemes]

Describe the bug

When using react-query in a project using yarn berry (3+), in combination with workspace, then dependencies are no longer shared across the project and instead only direct dependencies of each library are visible to it.

As a result, using react-query from a next.js project and client side rendering fails as it is unable to import react-dom, which does not appear as a dependency, or a peer dependency, in react query.

It is possible to work around this by making react and react-dom dependencies of the top level project in a yarn workspace.

Your minimal, reproducible example

N/A

Steps to reproduce

1. Create a new yarn 3 workspace, with a module containing a next.js project with dependency on react-query
2. Attempt to use react-query in a client side component of this project
3. Observe that react-query fails to find react-dom, as it is not a dependency of react-query and thus invisible to it under yarn 3 resolution rules

Expected behavior

React-dom is resolved as dependency of react-query, or alternatively, a react-dom specific version of / addon to react-query is required in a react-dom environment.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• Linux Ubuntu 18, any browser

react-query version

3.35.0

TypeScript version

4.6.3

Additional context

No response

[TkDodo]

hmm, I am seeing that we have react-dom listed as peerDependenciesMeta, but judging from the npm docs, those things in peerDependenciesMeta should still be listed as peerDependencies.

Yarn also respects the peerDependenciesMeta, so maybe adding react-dom and react-native as peer dependencies would suffice? Do you want to create a PR with that change, so that we can try it out with the codesandbox preview build?

[TkDodo]

we only use react-dom to set the batch function for our internal notify manager:

https://github.com/tannerlinsley/react-query/blob/c532d81313a9c036f48eaa8e3e6dd808e9587631/src/core/notifyManager.ts#L89-L95

we call this here:

https://github.com/tannerlinsley/react-query/blob/ac342e237ae9fab6759f2d7be616662da6c16225/src/react/setBatchUpdatesFn.ts#L2-L4

and we have two files:

• reactBatchedUpdates.ts
• reactBatchedUpdates.native.ts

I'm not sure if the native one is picked up for react-native automatically, maybe @arnaudbzn knows this? But it seems like you need either react-dom or react-native.

[WPaczula]

I have a sandbox environment where I don't have any access to the DOM, and react-dom doesn't work. Is there any workaround to use react-query without react-dom?

[TkDodo]

@WPaczula does it not work to call notifyManager.setBatchNotifyFunction with a function of your choice? Could also be one that just calls the passed callback.