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?