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,