Tanstack React Query not importing

Question

I am trying to implement tanstack react query into a project I am working on to manage state.

I am trying to set it up alongside a (tutorial for using react query with nextjs 13, and while I feel I am following it completely, I am getting all sorts of import errors.

The error I am getting is this:

./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js
Attempted import error: 'hydrate' is not exported from '@tanstack/query-core' (imported as 'hydrate').

Import trace for requested module:
./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js
./node_modules/@tanstack/react-query/build/modern/index.js
./src/app/_components/providers/TanstackProvider.tsx

but in my console I am getting the same issue with useQueries, useMutation, useMutations, useSuspenseBoundary and many others, quite possibly everything.

I have @tanstack/react-query version 5.17.7 installed but I have also tried downgrading to 4.35.3 and received the same error.

I got as far as creating a tanstack provider and attempting to do my first query before I realized nothing was being imported.

Here is my tanstack provider:

TanstackProver.tsx

"use client";

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

const TanstackProvider = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

export default TanstackProvider;

and I am using it in my layout.tsx file as such:

layout.tsx

import type { Metadata } from "next";
import { Rubik } from "next/font/google";
import "./globals.css";
import CommentContextProvider from "@/context/CommentContext";
import { getComments } from "@/lib/helpers/db-calls";
import prisma from "@/lib/helpers/prisma";
import TanstackProvider from "./_components/providers/TanstackProvider";

const rubik = Rubik({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // const comments = await prisma.comment.findMany();

  return (
    <html lang="en">
      <body className={rubik.className}>
        <TanstackProvider>
          {/* <CommentContextProvider comments={comments}> */}
            {children}
          {/* </CommentContextProvider> */}
        </TanstackProvider>
      </body>
    </html>
  );
}

the commented out section was where I was using react context to manage the state before I tried to implement react query.

I am using next 14.0.4 with the app router.

Any info on what I can do to remedy this would be greatly appreciated.

EDIT: I made a new barebones project with react-query and was able to get it to work as intended. I winnowed my project where it wasn't working down to the same code as the new project to see what exactly was causing it but the problem still persists, so I have no idea what caused the issue.

Syed Mishar Newaz · Accepted Answer · 2024-01-07 07:02:39Z

0

Just take a look at the react query doc. https://tanstack.com/query/v4/docs/react/guides/ssr . They've explained this:

// layout.tsx
import {
  Hydrate,
  DehydratedState,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

export default function RootLayout({ children, dehydratedState }: React.PropsWithChildren & { dehydratedState: DehydratedState } ) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        ...
        {children}
        ...
      </Hydrate>
    </QueryClientProvider>
  )
}

edited Jan 7, 2024 at 7:02

answered Jan 7, 2024 at 6:56

Syed Mishar Newaz

5672 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tanstack React Query not importing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related