search

wevm / wagmi

Reactive primitives for Ethereum apps
https://wagmi.sh
MIT License
5.99k stars 1.06k forks source link

Error: No QueryClient set, use QueryClientProvider to set one #3744

Closed Kaldrogh closed 7 months ago

Kaldrogh commented 7 months ago

Describe the bug

Unable to figure out why this error keeps being thrown as i've checked for hours almost everything. I've done extensive searches accross the web to try to find a workaround, with no luck.

image

package.json:

{ "name": "my-app", "version": "2.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "export": "next export", "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"", "build:icons": "tsc -b src/iconify-bundle && node src/iconify-bundle/bundle-icons-react.js" }, "dependencies": { "@casl/ability": "6.3.3", "@casl/react": "3.1.0", "@emotion/cache": "11.10.5", "@emotion/react": "11.10.6", "@emotion/server": "11.10.0", "@emotion/styled": "11.10.6", "@faker-js/faker": "^8.0.2", "@iconify/react": "4.1.0", "@moralisweb3/next": "^2.23.2", "@mui/lab": "^5.0.0-alpha.169", "@mui/material": "^5.15.14", "@mui/system": "^5.15.14", "@mui/x-data-grid": "^7.0.0", "@mui/x-date-pickers": "^7.0.0", "@popperjs/core": "2.11.6", "@rainbow-me/rainbowkit": "^2.0.2", "@tanstack/query-core": "^5.28.6", "@tanstack/react-query": "^5.28.6", "@tanstack/react-query-devtools": "^5.28.6", "@types/dompurify": "^3.0.2", "@types/draft-convert": "^2.1.4", "@types/draftjs-to-html": "^0.8.1", "@types/jsonwebtoken": "^9.0.1", "@types/lodash": "^4.14.194", "@types/numeral": "^2.0.5", "@types/react-dom": "^18.2.8", "@types/react-lines-ellipsis": "^0.15.2", "@types/uuid": "^9.0.2", "@types/webextension-polyfill": "^0.10.7", "@uploadthing/react": "^6.0.2", "@upstash/ratelimit": "^0.4.4", "@vercel/analytics": "^1.0.2", "apexcharts": "^3.42.0", "apexcharts-clevision": "^3.28.5", "axios": "^1.6.2", "bootstrap-icons": "1.10.3", "chart.js": "^4.4.0", "cleave.js": "1.6.0", "clipboard-copy": "4.0.1", "clsx": "1.2.1", "date-fns": "2.29.3", "dompurify": "^3.0.3", "draft-js": "^0.11.7", "draftjs-to-html": "^0.9.1", "embla-carousel-react": "^8.0.0-rc15", "embla-carousel-wheel-gestures": "^8.0.0-rc05", "emoji-picker-react": "^4.4.9", "ethers": "^6.11.1", "jose": "^4.14.0", "jsonwebtoken": "^9.0.0", "lodash": "^4.17.21", "mongoose": "^8.0.3", "moralis": "^2.23.2", "nanoid": "^4.0.2", "next": "^14.1.4", "next-auth": "^4.24.5", "nprogress": "0.2.0", "numeral": "^2.0.6", "react": "^18.2.0", "react-apexcharts": "^1.4.1", "react-chrono": "^2.2.0", "react-countdown": "^2.3.5", "react-datepicker": "4.10.0", "react-dom": "18.2.0", "react-draft-wysiwyg": "^1.15.0", "react-dropzone": "^14.2.3", "react-error-boundary": "^4.0.8", "react-hook-form": "^7.43.9", "react-hot-toast": "^2.4.1", "react-lines-ellipsis": "^0.15.3", "react-multi-carousel": "^2.8.4", "react-perfect-scrollbar": "1.5.8", "react-popper": "^2.3.0", "react-swipeable-views": "^0.14.0", "react-transition-group": "^4.4.5", "recharts": "^2.12.3", "stylis": "4.1.3", "stylis-plugin-rtl": "2.1.1", "swr": "^2.2.5", "uploadthing": "^6.0.4", "uuid": "^9.0.0", "viem": "^2.8.16", "wagmi": "^2.5.12", "yup": "^1.3.2", "zod": "^3.22.2" }, "devDependencies": { "@iconify/iconify": "^3.1.1", "@iconify/json": "^2.2.195", "@iconify/tools": "^4.0.2", "@iconify/types": "^2.0.0", "@iconify/utils": "^2.1.22", "@tanstack/eslint-plugin-query": "^5.28.6", "@types/cleave.js": "1.4.7", "@types/d3-color": "^3.1.0", "@types/draft-js": "0.11.10", "@types/node": "18.15.3", "@types/nprogress": "0.2.0", "@types/payment": "2.1.4", "@types/prismjs": "1.26.0", "@types/react": "^18.2.24", "@types/react-datepicker": "^4.15.1", "@types/react-draft-wysiwyg": "1.13.4", "@types/react-swipeable-views": "^0.13.1", "@typescript-eslint/eslint-plugin": "^7.3.1", "@typescript-eslint/parser": "^7.3.1", "eslint": "^8.57.0", "eslint-config-next": "^14.1.4", "eslint-config-prettier": "^9.1.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.29.1", "prettier": "^3.2.5", "typescript": "^5.4.3" } }

App.tsx:

`// ** React Imports import { ReactNode } from 'react'

import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query'

// ** Next Imports import type { NextPage } from 'next' import type { AppProps } from 'next/app' import Head from 'next/head' import { Router } from 'next/router'

// ** Loader Import import NProgress from 'nprogress'

// ** Emotion Imports import type { EmotionCache } from '@emotion/cache' import { CacheProvider } from '@emotion/react'

// ** Config Imports

import themeConfig from 'src/configs/themeConfig'

// ** Third Party Import import { Toaster } from 'react-hot-toast'

// ** Component Imports import ThemeComponent from 'src/@core/theme/ThemeComponent' import UserLayout from 'src/layouts/UserLayout'

import AuthGuard from 'src/layouts/components/auth/UserAuthGuard'

// ** Spinner Import import Spinner from 'src/layouts/components/spinner'

// ** Contexts import { SessionProvider } from 'next-auth/react' import { SettingsConsumer, SettingsProvider } from 'src/@core/context/settingsContext'

// ** Styled Components import ReactHotToast from 'src/@core/styles/libs/react-hot-toast'

// ** Utils Imports import { createEmotionCache } from 'src/@core/utils/create-emotion-cache'

// ** React Perfect Scrollbar Style import 'react-perfect-scrollbar/dist/css/styles.css'

// ** Import Wagmi import { RainbowKitProvider, darkTheme, getDefaultConfig } from '@rainbow-me/rainbowkit' import '@rainbow-me/rainbowkit/styles.css' import { WagmiProvider, http } from 'wagmi'

import { arbitrum, bsc } from 'wagmi/chains'

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

import 'src/iconify-bundle/icons-bundle-react'

// ** Global css styles import '../../styles/globals.css'

import { UsernameProvider } from '../contexts/UsernameContext'

// vercel Analytics import { Analytics } from '@vercel/analytics/react'

// ** Extend App Props with Emotion type ExtendedAppProps = AppProps & { Component: NextPage emotionCache: EmotionCache }

type GuardProps = { authGuard: boolean children: ReactNode }

const clientSideEmotionCache = createEmotionCache()

const wagmiConf = getDefaultConfig({ appName: MyProject', projectId: 'xxx', chains: [arbitrum, bsc], transports: {

[bsc.id]: http()

}, ssr: true })

// ** Pace Loader if (themeConfig.routingLoader) { Router.events.on('routeChangeStart', () => { NProgress.start() }) Router.events.on('routeChangeError', () => { NProgress.done() }) Router.events.on('routeChangeComplete', () => { NProgress.done() }) }

const queryClient = new QueryClient()

const Guard = ({ children, authGuard }: GuardProps) => { if (!authGuard) { return <>{children}</> } else { return <AuthGuard fallback={}>{children} } }

// ** Configure JSS & ClassName const App = (props: ExtendedAppProps) => { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props

// Variables const contentHeightFixed = Component.contentHeightFixed ?? false const getLayout = Component.getLayout ?? (page => {page})

const setConfig = Component.setConfig ?? undefined const authGuard = Component.authGuard ?? true

return (

My App {({ settings }) => { return ( {getLayout()} ) }}

) }

export default App `

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Wagmi Version

2.5.12

Viem Version

2.8.16

TypeScript Version

5.4.3

Check existing issues

Anything else?

No response

github-actions[bot] commented 7 months ago

Hello @Kaldrogh. Please provide a minimal reproduction using new.wagmi.sh for runtime issues or TypeScript Playground for type issues. Issues marked with "needs reproduction" will be closed if they have no activity within 3 days.

Yuripetusko commented 7 months ago

Have you tried changing the order of providers?

 <WagmiProvider config={wagmiConf}>
  <QueryClientProvider client={queryClient}>
    <HydrationBoundary state={pageProps.dehydratedState}>
      <SessionProvider session={pageProps.session}>
        <RainbowKitProvider modalSize='wide' theme={darkTheme()}>
Kaldrogh commented 7 months ago

Have you tried changing the order of providers?

 <WagmiProvider config={wagmiConf}>
  <QueryClientProvider client={queryClient}>
    <HydrationBoundary state={pageProps.dehydratedState}>
      <SessionProvider session={pageProps.session}>
        <RainbowKitProvider modalSize='wide' theme={darkTheme()}>

Thanks, but it doesn't change anything, still the same error. I've tried almost all the providers nesting possiblities with no luck.

I also get this error from time to time:

ReferenceError: localStorage is not defined

tmm commented 7 months ago

Minimal reproduction required

livetOwO commented 7 months ago

Using Page Router and App Router in both Next.js in seems to reproduce it I was getting the same error message while migrating to app router. After completing the migration, there was no issue. I checked the affected code and the absence of queryClient in SSR, but I couldn't figure out the cause.

next@13.5.6 wagmi@2.5.19 typescript@5.4.4 @tanstack/react-query@5.28.14 viem@2.9.9

Here is the code I tested https://github.com/livetOwO/wagmi-test

livetOwO commented 7 months ago

Minimal reproduction required

@tmm I think I reproduced it. Can you open it again? I also want to explore why context cannot be retrieved.

github-actions[bot] commented 6 months ago

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.