react-query-devtools is not working in nextjs v13

[SeungYn]

Describe the bug

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13.4.5
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^5.0.0-alpha.72",

but error occurs as follows "Attempted import error: 'template is not exported from 'solid-js/web' (imported as 'template')"

and It works fine without devtools

code

'use client';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode } from 'react';

export default function ReactQueryContext({
  children,
}: {
  children: ReactNode;
}) {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

library

result

Your minimal, reproducible example

.

Steps to reproduce

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13.4.5
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^5.0.0-alpha.72",

but error occurs as follows "Attempted import error: 'template is not exported from 'solid-js/web' (imported as 'template')"

and It works fine without devtools

Expected behavior

react-query-devtools is not working in nextjs v13
i'm useing nextjs v13.4.5
"@tanstack/react-query": "^5.0.0-alpha.71",
"@tanstack/react-query-devtools": "^5.0.0-alpha.72",

but error occurs as follows "Attempted import error: 'template is not exported from 'solid-js/web' (imported as 'template')"

and It works fine without devtools

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOs

Tanstack Query adapter

None

TanStack Query version

v5.0.0-alpha.71

TypeScript version

v5.1.3

Additional context

No response

[lachlancollins]

Hi @SeungYn , could I ask you to try using the following versions:

"@tanstack/react-query": "^5.0.0-alpha.53",
"@tanstack/react-query-devtools": "^5.0.0-alpha.53",

[mcous]

I encountered this same bug during build using:

"@tanstack/svelte-query": "5.0.0-alpha.77",
"@tanstack/svelte-query-devtools": "5.0.0-alpha.77",

I was able to fix the issue by adding "solid-js": "1.6.*" as a project dependency. @tanstack/query-devtools has a peer dependency on solid-js@^1.6.10 (note the caret), and my environment had installed solid-js@1.7. Apparently something about 1.7 isn't compatible with what query-devtools is relying on

[lachlancollins]

@SeungYn @mcous should be fixed in the next version without needing to install any other dependencies!

[SeungYn]

@lachlancollins thank you!

[mcous]

@lachlancollins I have upgraded @tanstack/svelte-query and @tanstack/svelte-query-devtools to 5.0.0-alpha.78 (latest) and I'm still experiencing the same build issue.

It looks like the fix landed in @tanstack/query-devtools, but I don't see a corresponding version bump for that package since the fix landed

[lachlancollins]

True, it didn't get bumped. I might need to change the publish config, it only looks for changes in src and package.json.

[TkDodo]

I'm seeing the same in one of our examples. @ardeora can you please have a look?

[TkDodo]

so in our nextJs example (pages dir), I'm getting ReferenceError: document is not defined coming from the devtools:

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
template
file:///project/sandbox/node_modules/@tanstack/query-devtools/build/esm/index.mjs (809:13)

in our app directory example, I'm getting

./node_modules/@tanstack/query-devtools/dist/esm/Devtools-ae26dfd2.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

@ardeora can you have a look at this please? I'd like to move to beta next week if possible.

[lachlancollins]

@TkDodo these issues seem to be because the codesandbox examples are installing an old version of the devtools package (which was solved in #5527). I've manually bumped the versions in #5715 which should hopefully fix the problem.

[lachlancollins]

@mcous a new version of all devtools packages is available!

[yasseralsaidi]

ANY BETA HERE FOR REACT?

[mcfry]

Still getting this error in my NextJS 13 project.

I'm using:

"@tanstack/react-query": "^5.0.0-rc.7",
"@tanstack/react-query-devtools": "^5.0.0-rc.7",

And I also tried using the "5.0.0-alpha.82" version of devtools.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <#document>.

[JohnGemstone]

Same with alpha.91

Warning: Expected server HTML to contain a matching <div> in <#document>.

[TkDodo]

please show a reproduction, we're in rc.10 already

[JohnGemstone]

Thanks @TkDodo I created a repo and it worked fine. My issue was where I was wrapping the context in my app..

error layout:

// src/app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider>
        <Providers> {/*  wrapping html */}
          <html lang="en">
            <body>{children}</body>
          </html>
        </Providers>
    </ClerkProvider>
  );
}

working layout:

// src/app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
        <html lang="en">
          <body>
            <Providers>{children}</Providers> {/*  wrapping children */}
          </body>
        </html>
    </ClerkProvider>
  )
}

EDIT: in a minimal repo both these work (without clerk), just in my own repo the first layout doesnt work.. I am using a Clerk auth context too which might not be playing nicely?

EDIT2: yep, once I add a clerk provider to the minimal repo I get the same error. you can find a repo below, unfortunately you'll first need environment keys from clerk to be able to test. Updated the snippets above to reflect this.

https://github.com/JohnGemstone/next-react-query-dev-clerk-provider/blob/main/src/app/layout.tsx