bug: Property 'queryClient' is missing in type Client

[developerasun]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

wagmi 0.11.7, @wagmi/core 0.9.7

Current Behavior

I'm using Wagmi with Typescript and Vite with below package.json.

"dependencies": {
    "@toast-ui/editor": "^3.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/joy": "5.0.0-alpha.69",
    "@mui/material": "^5.11.10",
    "@mui/styled-engine-sc": "^5.11.9",
    "@mui/system": "^5.11.11",
    "@mui/x-data-grid": "^6.0.0",
    "@tanstack/query-core": "^4.24.10",
    "@types/node": "^18.14.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-helmet": "^6.1.6",
    "@types/styled-components": "^5.1.26",
    "@types/uuid": "^9.0.1",
    "@vitejs/plugin-react": "^2.2.0",
    "@wagmi/core": "^0.9.7",
    "ethers": ">=5.5.1 <6.0.0",
    "html-react-parser": "^3.0.9",
    "prettier": "^2.8.4",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.7.1",
    "react-is": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "react-tabs": "^6.0.0",
    "react-toastify": "^9.1.1",
    "rollup": "^3.17.3",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.5",
    "uuid": "^9.0.0",
    "vite": "^4.1.0",
    "wagmi": "^0.11.7"
  },
  "packageManager": "[email protected]",
  "engines": {
    "node": ">=18.12.1",
    "npm": ">=8.19.2"
  }

WagmiConfig component throws below type error

  Property 'queryClient' is missing in type 'Client<(FallbackProvider | ProviderWithFallbackConfig<StaticJsonRpcProvider>) & { chains: ({ readonly id: 1; ... 5 more ...; readonly contracts: { ...; }; } | { ...; } | { ...; } | { ...; })[]; pollingInterval: number; }, WebSocketProvider>' but required in type '{ queryClient: QueryClient; }'.ts(2322)

Expected Behavior

wagmi client options delivered and wallet connection should work

Steps To Reproduce

Code and configure like below. This should work based on Wagmi.dev docs

import { configureChains, createClient } from '@wagmi/core';
import { polygon, polygonMumbai, mainnet, goerli } from '@wagmi/core/chains';
import { publicProvider } from '@wagmi/core/providers/public';
import { alchemyProvider } from '@wagmi/core/providers/alchemy';
import { InjectedConnector } from '@wagmi/core/connectors/injected';

const { chains, provider } = configureChains(
  [mainnet, goerli, polygon, polygonMumbai],
  // prettier-ignore
  [
    alchemyProvider({ apiKey:  import.meta.env.VITE_ALCHEMY_API_KEY}), 
    publicProvider()
  ]
);

export const WAGMI_CLIENT = createClient({
  autoConnect: true,
  connectors: [new InjectedConnector({ chains })],
  provider,
});

 <WagmiConfig client={WAGMI_CLIENT}>
// ... children
</WagmiConfig>

Link to Minimal Reproducible Example (StackBlitz, CodeSandbox, GitHub repo etc.)

No response

Anything else?

I copied error logs from Chrome browser.

Uncaught TypeError: Cannot read properties of undefined (reading 'mount')
    at QueryClientProvider.tsx:78:12
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9
    at workLoop (scheduler.development.js:266:34)
react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of undefined (reading 'mount')
    at QueryClientProvider.tsx:78:12
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:13)
    at invokeEffectsInDev (react-dom.development.js:27351:11)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:7)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:5)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
2react-dom.development.js:18687 The above error occurred in the <QueryClientProvider> component:

    at QueryClientProvider (http://localhost:5173/node_modules/.vite/deps/wagmi.js?v=421a082a:2874:3)
    at WagmiConfig (http://localhost:5173/node_modules/.vite/deps/wagmi.js?v=421a082a:3123:3)
    at main
    at http://localhost:5173/node_modules/.vite/deps/chunk-7EHXR3VF.js?v=421a082a:2383:51
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-7EHXR3VF.js?v=421a082a:5224:19)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-7EHXR3VF.js?v=421a082a:2383:51
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-7EHXR3VF.js?v=421a082a:5224:19)
    at PermanentDrawerLeft (http://localhost:5173/src/components/Navigation.tsx:37:3)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=421a082a:3318:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=421a082a:3731:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading 'mount')
    at QueryClientProvider.tsx:78:12
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9
    at workLoop (scheduler.development.js:266:34)

[developerasun]

Was able to solve this issue after adjusting import modules. Leave this for another web3 devs. Let me know if this is a correct approach :)

Before

Not working

import { configureChains, createClient, mainnet, goerli } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { polygon, polygonMumbai } from '@wagmi/core/chains';
import { alchemyProvider } from '@wagmi/core/providers/alchemy';
import { InjectedConnector } from '@wagmi/core/connectors/injected';

After

Working

import { polygon, polygonMumbai } from '@wagmi/core/chains';
import { alchemyProvider } from '@wagmi/core/providers/alchemy';
import { InjectedConnector } from '@wagmi/core/connectors/injected';

import { createClient, configureChains, mainnet, goerli } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';

[github-actions]

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.