When building react app using esbuild, devtools reports that it cannot find QueryClient

[johnjiang]

Describe the bug
I am using esbuild to build my react app, however, in development I get an error saying that QueryClient is not available:

QueryClientProvider.js:36 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at HJr (QueryClientProvider.js:36)
    at devtools.js:267
    at ZA (react-dom.development.js:14985)
    at THe (react-dom.development.js:17044)
    at HHe (react-dom.development.js:19098)
    at HTMLUnknownElement.no (react-dom.development.js:3945)
    at HTMLUnknownElement.ps.__trace__ (inline-script-content.js:146)
    at Object.gm (react-dom.development.js:3994)
    at cp (react-dom.development.js:4056)
    at uSe (react-dom.development.js:23964)

My app is following standard practice:

export function App(): ReactElement {
    return (
        <QueryClientProvider client={queryClient}>
            <AppContent />

            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
}

My esbuild configuration is also pretty straight forward:

build({
    bundle: true,
    define: {
        "process.env.NODE_ENV": "'development'",
    },
    entryPoints: ["./src/index.tsx"],
    inject: ["src/react-shim.ts"],
    loader: {
        ".ts": "ts",
    },
    minify: true,
    outfile: "./dist/main.js",
    plugins: [
        lessLoader({
            javascriptEnabled: true,
        }),
    ],
    sourcemap: true,
    target: "es2020",
}).catch(() => process.exit(1));

When I use my webpack build, everything is working as expected. When I build in production mode or remove devtools everything is working as normal.

[TkDodo]

We are tracking this here: #1936

seems to be an issue with a separate version of react-query being used for the devtools, and so they are using different contexts. Let’s please keep the discussion over there