v4 of broadcast client, "cannot resolve '../../src/methods/node.js"

[olliejm]

Describe the bug

I am trying to update a Gatsby application to the new v4 packages of React Query. All of this went fine with the exception of the new @tanstack/query-broadcast-client-experimental package. We were previously using the experimental broadcast client in v3 without any issues. The error reported, which breaks the build itself, is the following:

Module not found: Error: Can't resolve '../../src/methods/node.js' in 'C:\path\to\my\repo\node_modules\@tanstack\query-broadcast-client-experimental\build\esm'

I created a minimal reproduction of the issue on CodeSandbox using the gatsby starter. We are also using the persistQueryClient but I commented that out to ensure it was not an interaction of the two causing an issue.

I tried to create a reproduction using just the base React template of CodeSandbox, that seems to have a different problem caused simply by wrapping <App /> in the QueryClientProvider (error: Cannot read properties of undefined (reading 'mount')). The broadcast client is not used in that sandbox. Here is the link to that if it's of any additional use.

Your minimal, reproducible example

https://codesandbox.io/s/wild-framework-qz3fvl?file=/gatsby-browser.js

Steps to reproduce

1. import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental';
2. Create a new QueryClient, call the imported broadcast function and wrap the application in the provider with the client
3. Try to build the Gatsby application

Expected behavior

The webpack build breaks with the following error

Module not found: Error: Can't resolve '../../src/methods/node.js' in 'C:\path\to\my\repo\node_modules\@tanstack\query-broadcast-client-experimental\build\esm'

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 103.0.5060.134 (Official Build) (64-bit)

react-query version

4.0.10

TypeScript version

No response

Additional context

No response

[olliejm]

I did further reading and this seems to be related to the broadcast-channel package itself not being handled (or maybe not being configured correctly to be handled) by webpack and other bundlers:
FredKSchott/snowpack#2450

[alvesvaren]

This happens to me too

[olliejm]

I'm not sure why it didn't happen previously to me with v3 as it seems both query v3 and v4 are using the same version of the broadcast-channel package, which is the source of the code causing the error

It does appear though that the problematic code in question is no longer in the latest version of broadcast-channel (4) so perhaps updating that package could be one solution

If I find some spare time I can try to do that and see if it solves the issue or creates new ones

[TkDodo]

it might have something to do with bundling.

It does appear though that the problematic code in question is no longer in the latest version of broadcast-channel (4) so perhaps updating that package could be one solution
If I find some spare time I can try to do that and see if it solves the issue or creates new ones

that would be great!