Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-query-devtools is not working in nextjs v13 #5671

Closed
SeungYn opened this issue Jul 4, 2023 · 15 comments
Closed

react-query-devtools is not working in nextjs v13 #5671

SeungYn opened this issue Jul 4, 2023 · 15 comments

Comments

@SeungYn
Copy link

SeungYn commented Jul 4, 2023

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
image

result
image

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
Copy link
Member

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
Copy link

mcous commented Jul 6, 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 [email protected]. Apparently something about 1.7 isn't compatible with what query-devtools is relying on

@lachlancollins
Copy link
Member

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

@SeungYn
Copy link
Author

SeungYn commented Jul 10, 2023

@lachlancollins thank you!

@mcous
Copy link

mcous commented Jul 11, 2023

@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
Copy link
Member

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
Copy link
Collaborator

TkDodo commented Jul 14, 2023

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

@TkDodo
Copy link
Collaborator

TkDodo commented Jul 14, 2023

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
Copy link
Member

lachlancollins commented Jul 15, 2023

@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
Copy link
Member

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

@yasseralsaidi
Copy link

ANY BETA HERE FOR REACT?

@mcfry
Copy link

mcfry commented Oct 10, 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>.

@JohnGemstone
Copy link

JohnGemstone commented Oct 11, 2023

Same with alpha.91

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

@TkDodo
Copy link
Collaborator

TkDodo commented Oct 11, 2023

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

@JohnGemstone
Copy link

JohnGemstone commented Oct 11, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants