query: react-query-devtools is not working in nextjs v13

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 15 (5 by maintainers)

Most upvoted comments

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

JohnGemstone on Oct 11, 2023

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

lachlancollins on Jul 15, 2023

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>.

mcfry on Oct 10, 2023

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

lachlancollins on Jul 6, 2023

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

TkDodo on Oct 11, 2023

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

lachlancollins on Jul 12, 2023

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

mcous on Jul 6, 2023

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",

lachlancollins on Jul 6, 2023