Progressive migration not working with Next.js v14.2.5, keep getting the error "Error: No QueryClient set, use QueryClientProvider to set one" #3961
Description
Hi all, I've been trying to do progressive migration as mentioned here in the doc: https://portal.thirdweb.com/typescript/v5/migrate#progressive-migration. However it doesn't seem to work in Next.js. It seems I can only use one SDK, either v4 or v5 and can't use both together.
-> I tried installing and using the QueryClientProvider from @tanstack/react-query to avoid getting the QueryClientProvider error but the issue still persists.
(package.json file)
{
"name": "amazingapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@tanstack/react-query": "^5.51.21",
"@thirdweb-dev/react": "^4.9.4",
"@thirdweb-dev/sdk": "^4.0.99",
"ethers": "^5.7.2",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"thirdweb": "^5.43.2"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.5",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
This is my app structure:
(layout.tsx file)
`import { Inter } from "next/font/google";
import "./globals.css";
import { ThirdwebProviderV4 } from "./ThirdwebProviderv4";
import { ThirdwebProvider } from "thirdweb/react";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
< html lang="en" >
< body className={inter.className} >
< ThirdwebProviderV4 clientId="clientId" >
< ThirdwebProvider>{children}
</ ThirdwebProviderV4 >
</ body >
</ html >
);
}`
(ThirdwebProviderV4.tsx file)
`"use client";
import { ThirdwebProvider } from "@thirdweb-dev/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
export function ThirdwebProviderV4({
children,
clientId,
}: {
children: React.ReactNode;
clientId: string;
}) {
const [queryClient] = useState(() => new QueryClient());
return (
< QueryClientProvider client={queryClient} >
< ThirdwebProvider
clientId={clientId}
autoConnect={false}
autoConnectTimeout={100}
>
{children}
</ ThirdwebProvider>
</ QueryClientProvider>
);
}
`
- I am able to use the v5's ConnectButton component in a page.
- The v4's ConnectWallet button renders but doesn't connect to any wallet. When you click on any wallet inside the modal (for example, MetaMask) then it gives the error "Error: No QueryClient set, use QueryClientProvider to set one". And if I don't use 'use client' then v4 ConnectWallet button will not even work.
- Cannot use both ConnectWallet and ConnectButton components in a single file.