I'm using
- NextJS version 14.1.4
- @tanstack/react-query 5.28.8
- aws-amplify 6.0.23
So there are guides on how to setup NextJS with react-query. They would say to make the provider that's initializing react-query a separate file and to attach "use client" on top. I did just that but, whenever I start the server and attempt to load any page, it throws the error:
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').
As reference:
Here's my layout.js
import { Inter } from "next/font/google";
import "../app/ui/globals.css";
import { Authenticator } from "@aws-amplify/ui-react";
import "../app/ui/globals.css";
import Provider from "./providers/providers";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
return (
<Provider>
<html lang="en">
<body className={inter.className}>
<Authenticator.Provider>{children}</Authenticator.Provider>
</body>
</html>
</Provider>
);
}
Here's my providers.jsx
"use client";
import awsconfig from "@/app/aws-exports";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Amplify } from "aws-amplify";
import { useState } from "react";
Amplify.configure(awsconfig);
export default function Provider({ children }) {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />
{children}
</QueryClientProvider>
);
}
I'm also questioning if my placement of Amplify.configure() is correct, because if so, I'd have to use it on every page.jsx file?
For example:
"use server"
import PropTypes from "prop-types";
import { HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { listInfluencer } from "@/app/server/actions";
import ClubsComponent from "@/app/ui/dashboard/clubs/clubs";
import { Amplify } from "aws-amplify";
import awsconfig from "@/app/aws-exports";
import { dehydrate } from "react-query";
Amplify.configure(awsconfig, { ssr: true }); <-- I have to place this on every page.jsx?
const ClubsPage = async ({ searchParams }) => {
const q = searchParams?.query || "";
const queryClient = new QueryClient();
await queryClient.prefetchQuery({
queryKey: ["listInfluencers"],
queryFn: listInfluencer({
filter: {
creatorType: {
eq: "club",
},
},
}),
});
return (
<div>
<HydrationBoundary state={dehydrate(queryClient)}>
<ClubsComponent />
</HydrationBoundary>
</div>
);
};
Any help to solve this error would be appreciated.