Progressive migration not working with Next.js v14.2.5, keep getting the error "Error: No QueryClient set, use QueryClientProvider to set one"

[codingfarhan]

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.

[kien-ngo]

Hi @codingfarhan thanks a lot for reporting this issue with such details!

I was able to replicate the issue, and I have prepared this repo that might be what you are looking for ^

https://github.com/kien-ngo/progressive-migration

So the trick here is, if you want to use 2 react-query versions at the same time, you can install the react-query v5 with an alias:

npm install react-query-v5:npm:@tanstack/react-query@latest

Then your package.json will look like this:

"dependencies": {
  "@tanstack/react-query": "^4",
  "@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",
  "react-query-v5": "npm:@tanstack/react-query@latest",
  "thirdweb": "^5.44.1"
},

Do let me know if it helps 🙏

[codingfarhan]

Thanks a lot for answering @kien-ngo ! It looks like it's working perfectly :)

Btw just out of curiosity, is there a way to use both v4 and v5 together without installing extra dependencies like tanstack or react-query-v5? Or is this the only way to make them work together?

Cheers.

[kien-ngo]

I'm afraid you'll need both! But the point of the migration is you'll eventually get rid of the outdated one ^

[codingfarhan]

Right, makes sense,