Doesn't work out of the box with next 13 #4933

JonasWijne · 2023-02-03T21:39:29Z

Describe the bug

when adding react-query to next 13 i get following error when running

error - ./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs
Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs
./node_modules/@tanstack/react-query/build/lib/index.mjs
./src/app/layout.tsx

code

import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

const queryClient = new QueryClient()

/* ... */
      <QueryClientProvider client={queryClient}>
          {children}
      </QueryClientProvider>
/* ... */

Your minimal, reproducible example

https://github.com/JonasWijne/next-test-react-query

Steps to reproduce

git clone https://github.com/JonasWijne/next-test-react-query.git
cd next-test-react-query
yarn
yarn dev
open browser to http://localhost:3000

Expected behavior

as a user i expect it to compile/dev serve

How often does this bug happen?

Every time

Screenshots or Videos

Platform

OS: MacOS
browser: chrome

TanStack Query version

4.24.4

TypeScript version

4.9.5

Additional context

No response

The text was updated successfully, but these errors were encountered:

Bknight010723 · 2023-02-04T22:30:09Z

sdkmanager --uninstall --package_file #4939

d4nyll · 2023-02-05T01:15:48Z

With Next.js 13's app directory feature, every component, by default, is a Server Component. Which means you are trying to use context in a Server Component, which is not supported. Instead, you should create a new Client Component (with 'use client'; directive), apply your context provider there (alongside any other context providers), and import that in your root layout.

'use client';

import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

export default function QueryProvider({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>
        <QueryProvider>
          {children}
        </QueryProvider>
      </body>
    </html>
  )
}

See Using context in Client Components for more details.

OrmEmbaar · 2023-02-08T21:12:24Z

I am seeing the same error. The TanStack docs suggest creating a singleton client on the server for import into server components, but that does not seem to work.

I do not get the error with the initialData approach outlined in the docs, presumably because it does not create a client on the server. I am using Next 13.1.6 and react-query 4.24.4.

arzzzen · 2023-02-08T22:12:33Z

+1 have the same error after attempt to follow TanStack docs

barbarah · 2023-02-09T10:38:26Z

I also cannot get it working with Hydrate, following the docs. It does work with the initialData.

I made a sandbox with a very simple Next 13 app. I made two examples, one with initial data, and one with hydrate, by following the TanStack docs for Next 13. The hydrate code throws the error.

https://codesandbox.io/p/sandbox/next13-react-query-h4qh77

TkDodo · 2023-02-12T08:31:15Z

The docs say you have to put the providers into a separate app/providers.tsx file that has 'use client' at the top. I did that and it works, here's a fork of your reproduction:

https://codesandbox.io/p/sandbox/gracious-merkle-8lzrrk

Talent30 · 2023-02-14T07:25:04Z

The docs say you have to put the providers into a separate app/providers.tsx file that has 'use client' at the top. I did that and it works, here's a fork of your reproduction:

https://codesandbox.io/p/sandbox/gracious-merkle-8lzrrk

Yes, it works up to now but once you start using getQueryClient in server component you get the error error - ../../node_modules/@tanstack/react-query/build/lib/Hydrate.mjs Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Talent30 · 2023-02-14T07:44:25Z

@TkDodo
demo

TkDodo · 2023-02-14T07:52:51Z

@Ephem do you know why this is happening? It seems like

import { QueryClient } from "@tanstack/react-query"; brings in a lot more than just the QueryClient, as the error comes form Hydrate.tsx. Removing that import makes it work. However, Hydrate.tsx alone has the 'use client' directive at the top 🤔

Talent30 · 2023-02-14T08:07:30Z

@TkDodo If you go to the Hydrate.esm.js output the 'use client' is not there for some reason, has it been removed during the build process? I am using v4.24.4.

Talent30 · 2023-02-14T08:14:40Z

Can't upload img...

module path: node_modules/@tanstack/react-query/build/lib/Hydrate.esm.js

line 1: import * as React from 'react';

source code path: react-query/src/Hydrate.tsx
line 1: 'use client'
line 2: import * as React from 'react'

TkDodo · 2023-02-14T12:08:22Z

I think it could be this:

'use client' directive for Client Components rollup/rollup#4699

probably we'd need to preserve the directive for esm builds?

Talent30 · 2023-02-15T04:18:38Z

I think it could be this:

'use client' directive for Client Components rollup/rollup#4699

probably we'd need to preserve the directive for esm builds?

The way suggested will add 'use client' to every single file isn't it? Would it be harmful?

TkDodo · 2023-02-15T07:24:49Z

The way suggested will add 'use client' to every single file isn't it? Would it be harmful?

We have added use client to every file that needs it. When bundled together into one file, it should be removed, which is what rollup does. But for ESM builds, I think separate files are being kept, so we probably would need the use client directive there.

I'm gonna wait for some input from @Ephem if that's correct or not.

Ephem · 2023-02-15T08:20:23Z

Busy days so will look at this in more detail soon, but I think you've definitely found the cause. Will need to think a bit on how this affects the different builds, can we even have a single entry point when with builds that bundle into a single file?

I think we ran into this during the docs-PR as well so at some point we recommended importing what you can from import { QueryClient } from '@tanstack/query-core' instead of import { QueryClient } from '@tanstack/react-query' which might still be a working workaround/fix.

TkDodo · 2023-02-15T08:23:32Z

importing what you can from import { QueryClient } from '@tanstack/query-core'

but for this, eslint will likely force you to have a direct dependency on query-core, which most people won't have. Also, if you add query-core as a dependency, you will wind up with two version of query-core, because react-query re-exports the core. Difficult topic 😅

pixelmord · 2023-02-15T19:35:01Z

I ran into the same error

Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
../../node_modules/.pnpm/@tanstack+react-query@4.24.6_biqbaboplfbrettd7655fr4n2y/node_modules/@tanstack/react-query/build/lib/Hydrate.mjs

To fix that I wrapped all components that imported from '@tanstack/react-query' in components that "use client" and imported all functions used in server components from '@tanstack/query-core'
e.g.

import { QueryClient, dehydrate } from '@tanstack/query-core';

satnaing · 2023-02-16T15:26:40Z

I also cannot get it working with Hydrate, following the docs. It does work with the initialData.

I made a sandbox with a very simple Next 13 app. I made two examples, one with initial data, and one with hydrate, by following the TanStack docs for Next 13. The hydrate code throws the error.

https://codesandbox.io/p/sandbox/silly-poincare-w6q5nk

@barbarah Have you already solved that problem?

I'm facing the same issue. I cannot prefetch data on server using Hydrate method. initialData along with prop drilling works though.
I'm doing the exact same thing according to docs

barbarah · 2023-02-16T18:38:16Z

Sorry, no. I've tried the different options mentioned above. But I did not get my sandbox working.

I did update the sandbox link because apparently, the link was not working: https://codesandbox.io/p/sandbox/next13-react-query-h4qh77

feledori · 2023-02-23T16:46:35Z

I got it working by doing these step:

Wrapping the Hydrate wrapper in a separate "use client" component
Importing QueryClient from @tanstack/query-core in the server singleton
Importing the dehydrate function from @tanstack/query-core as well.

@barbarah Here is the working sandbox with the changes I just mentioned.

mk965 · 2023-03-10T08:58:03Z

I got it working by doing these step:

Wrapping the Hydrate wrapper in a separate "use client" component

Importing QueryClient from @tanstack/query-core in the server singleton

Importing the dehydrate function from @tanstack/query-core as well.

@barbarah Here is the working sandbox with the changes I just mentioned.

@feledori

Good job!
But in your demo "getPost" is run twice. Once on the server, once on the client.

feledori · 2023-03-10T13:42:00Z

@mk965 Just updated the sandbox, you just have to disable revalidateOnMount for the hydrated useQuery hook.

Ephem · 2023-03-11T15:02:21Z

I finally did some digging and thinking on this today and thought I'd document my findings:

"use client" wont ever work in a bundled build with shared code. Either you include it at the top of the bundle for everything, or you don't. My suggestion:
- We require/strongly recommend you use an unbundled build if you are using RSCs (this is what Next will use out of the box, so should be straightforward)
- If we would want to have a workaround so bundled builds could work with RSCs, we could use the Rollup banner2 plugin to add "use client" at the top of the bundled builds, and document that in this case you need to do imports in RSCs from @tanstack/query-core instead of @tanstack/react-query. Not sure if it would work, but even if it did, I don't think this is something we should really support unless some very clear need arises.
~~The~~ One reason our non-bundled builds are currently failing on this is indeed the Rollup issue @TkDodo linked earlier: 'use client' directive for Client Components rollup/rollup#4699
- My hope is that preserving directives could be supported when the option preserveModules: true is set, that would let us fix this issue so everything works as in the current documentation, left a comment about this in the issue.
Another reason builds are failing is even if you fix the above, builds are now(? Has this always been the case? Feels like something has changed here..) failing on imports and not usage of React "client" features, builds will fail on any server import of @tanstack/react-query since the index file is re-exporting things like useQuery that has a bunch of client-only features in it, but no "use client" at the top.
- Note that not having "use client" at the top of those was intentional to have better error messages, these should never be imported from a server component, so only having "use client" at the top of component files gave better messages. I tested this myself, this is why it feels as if something has changed here..
- Either way, to fix this we should just add back "use client" to the top of every file that uses React client only features in the react-query package.

I think we should:

While we wait for the Rollup issue to unblock: Update the docs to the workaround @feledori documented above (basically what the docs @efilion contributed were before we added "use client" and rewrote them to remove HydrateOnClient).
Add "use client" to the top of all files in @tanstack/react-query that imports something from React (all of them besides index?) (This wont fix anything until the Rollup issue is unblocked though)

Ephem · 2023-03-11T15:16:44Z

Actually, what we could do now as a temporary fix is add "use client" to the top of the entire react-query package with the Rollup banner2-plugin as documented in that issue (maybe only for the .mjs build?) and just document that on the server you have to use @tanstack/query-core for now? As long as you always use that only in RSCs, and always import from @tanstack/react-query elsewhere we shouldn't have a problem with duplicates right?

Ephem · 2023-03-12T21:25:25Z

I got nerdsniped and built a Rollup plugin to preserve directives: https://github.com/Ephem/rollup-plugin-preserve-directives

I'll do some more testing, but with this I think we should be able to make it all work as per the docs.

TkDodo · 2023-03-20T08:39:21Z

please try it with:

https://github.com/TanStack/query/releases/tag/v4.28.0

mahdi-farnia · 2023-04-10T20:13:24Z

I did every thing including Provider file that has 'use client' directive and everything i found,
But it didn't work

Does this occurs because of next 13.3.0? (provided examples in this thread are using version 13.1.x)

2manoj1 · 2023-04-13T12:42:11Z

Hello Everyone!
I made small POC with Next13 and React Query - Its working.
Have a look
Example code

Need a feedback or suggestion if any

momenfc · 2023-05-16T00:06:14Z

try to import dehydrate from '@tanstack/query-core' instead '@tanstack/react-query'
import { dehydrate } from '@tanstack/query-core';

Schmale97 · 2023-05-30T13:34:14Z

I did every thing including Provider file that has 'use client' directive and everything i found, But it didn't work

Does this occurs because of next 13.3.0? (provided examples in this thread are using version 13.1.x)

I have also been able to get it to work with next version >=13.3.0 and @tanstack/* version 4.29.12

Nishchit14 · 2024-01-31T10:57:50Z

I just found the fix, In my case I was using one valtio function in utils.ts file which was used somewhere in the server side api.

Rule is if you're using any client side library then make sure that you're not using it's client apis/functions of library directly or indirectly on server routes or server actions.

Franklivania · 2024-04-10T09:51:54Z

I got it working by doing these step:
1. Wrapping the Hydrate wrapper in a separate "use client" component

2. Importing QueryClient from @tanstack/query-core in the server singleton

3. Importing the dehydrate function from @tanstack/query-core as well.
@barbarah Here is the working sandbox with the changes I just mentioned.

This worked, and this is an outline of what I am using

"@tanstack/react-query": "^4.29.7",
    "next": "13.5.6",

TkDodo closed this as completed Feb 12, 2023

TkDodo reopened this Feb 14, 2023

This was referenced Mar 15, 2023

docs(ssr): add experimental app directory guide #4568

Merged

Preserve 'use client' directives #5161

Merged

TkDodo closed this as completed in #5161 Mar 20, 2023

Paperkeem mentioned this issue Jun 15, 2023

[Feat] YW2-22 provider 생성, TS 5.1 버전업 YAPP-Github/dangledangle-client#17

Merged

This was referenced Jul 13, 2023

Test w/ thirdweb. oceanprotocol/tokengated-next-chatgpt#3

Closed

Set up wagmi + rainbowkit. oceanprotocol/tokengated-next-chatgpt#2

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work out of the box with next 13 #4933

Doesn't work out of the box with next 13 #4933

JonasWijne commented Feb 3, 2023

Bknight010723 commented Feb 4, 2023

d4nyll commented Feb 5, 2023

OrmEmbaar commented Feb 8, 2023 •

edited

Loading

arzzzen commented Feb 8, 2023

barbarah commented Feb 9, 2023 •

edited

Loading

TkDodo commented Feb 12, 2023

Talent30 commented Feb 14, 2023

Talent30 commented Feb 14, 2023 •

edited

Loading

TkDodo commented Feb 14, 2023

Talent30 commented Feb 14, 2023 •

edited

Loading

Talent30 commented Feb 14, 2023 •

edited

Loading

TkDodo commented Feb 14, 2023

Talent30 commented Feb 15, 2023 •

edited

Loading

TkDodo commented Feb 15, 2023

Ephem commented Feb 15, 2023

TkDodo commented Feb 15, 2023

pixelmord commented Feb 15, 2023

satnaing commented Feb 16, 2023

barbarah commented Feb 16, 2023 •

edited

Loading

feledori commented Feb 23, 2023

mk965 commented Mar 10, 2023

feledori commented Mar 10, 2023

Ephem commented Mar 11, 2023

Ephem commented Mar 11, 2023

Ephem commented Mar 12, 2023

TkDodo commented Mar 20, 2023

mahdi-farnia commented Apr 10, 2023

2manoj1 commented Apr 13, 2023

momenfc commented May 16, 2023

Schmale97 commented May 30, 2023

Nishchit14 commented Jan 31, 2024

Franklivania commented Apr 10, 2024

Doesn't work out of the box with next 13 #4933

Doesn't work out of the box with next 13 #4933

Comments

JonasWijne commented Feb 3, 2023

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

TanStack Query version

TypeScript version

Additional context

Bknight010723 commented Feb 4, 2023

d4nyll commented Feb 5, 2023

OrmEmbaar commented Feb 8, 2023 • edited Loading

arzzzen commented Feb 8, 2023

barbarah commented Feb 9, 2023 • edited Loading

TkDodo commented Feb 12, 2023

Talent30 commented Feb 14, 2023

Talent30 commented Feb 14, 2023 • edited Loading

TkDodo commented Feb 14, 2023

Talent30 commented Feb 14, 2023 • edited Loading

Talent30 commented Feb 14, 2023 • edited Loading

TkDodo commented Feb 14, 2023

Talent30 commented Feb 15, 2023 • edited Loading

TkDodo commented Feb 15, 2023

Ephem commented Feb 15, 2023

TkDodo commented Feb 15, 2023

pixelmord commented Feb 15, 2023

satnaing commented Feb 16, 2023

barbarah commented Feb 16, 2023 • edited Loading

feledori commented Feb 23, 2023

mk965 commented Mar 10, 2023

feledori commented Mar 10, 2023

Ephem commented Mar 11, 2023

Ephem commented Mar 11, 2023

Ephem commented Mar 12, 2023

TkDodo commented Mar 20, 2023

mahdi-farnia commented Apr 10, 2023

2manoj1 commented Apr 13, 2023

momenfc commented May 16, 2023

Schmale97 commented May 30, 2023

Nishchit14 commented Jan 31, 2024

Franklivania commented Apr 10, 2024

OrmEmbaar commented Feb 8, 2023 •

edited

Loading

barbarah commented Feb 9, 2023 •

edited

Loading

Talent30 commented Feb 14, 2023 •

edited

Loading

Talent30 commented Feb 14, 2023 •

edited

Loading

Talent30 commented Feb 14, 2023 •

edited

Loading

Talent30 commented Feb 15, 2023 •

edited

Loading

barbarah commented Feb 16, 2023 •

edited

Loading