'WagmiProvider' cannot be used as a JSX component.

[mg0425640]

'use client'

import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from '@/lib/wallet'
import { ReactNode, useState } from 'react'

interface WalletProviderProps {
children: ReactNode
}

function WalletProviderInner({ children, queryClient }: WalletProviderProps & { queryClient: QueryClient }) {
return (


{children}


)
}

export default function WalletProvider({ children }: WalletProviderProps) {
const [queryClient] = useState(() => new QueryClient())

return (

{children}

)
}==in this showing (WagmiProvider' cannot be used as a JSX component.
Its type '(parameters: PropsWithChildren) => FunctionComponentElement<PropsWithChildren>' is not a valid JSX element type.
Type '(parameters: PropsWithChildren) => FunctionComponentElement<PropsWithChildren>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'FunctionComponentElement<PropsWithChildren>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'FunctionComponentElement<PropsWithChildren>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(379, 9): 'children' is declared here.)

[wesleysmyth]

This is a TypeScript types version conflict — specifically, duplicate or mismatched @types/react versions in your dependency tree.

Diagnose

npm ls @types/react
# or
pnpm ls @types/react --depth=3

You will likely see two different versions (e.g., 18.3.x and 19.0.x). When two versions of @types/react exist, TypeScript sees React.JSX.Element from wagmi's types as a different type than the one your app uses.

Fix 1: Force a single version (recommended)

npm — add to package.json:

{
  "overrides": {
    "@types/react": "^19.0.0"
  }
}

pnpm — add to package.json:

{
  "pnpm": {
    "overrides": {
      "@types/react": "^19.0.0"
    }
  }
}

yarn — add to package.json:

{
  "resolutions": {
    "@types/react": "^19.0.0"
  }
}

Then delete node_modules and your lockfile, and reinstall:

rm -rf node_modules package-lock.json
npm install

Fix 2: Align your dependency versions

Make sure wagmi, @tanstack/react-query, and your React types are all targeting the same React major version:

npm install @types/react@latest @types/react-dom@latest
npm install wagmi@latest @tanstack/react-query@latest

Fix 3: TypeScript skipLibCheck (quick workaround)

If you just need to unblock development:

// tsconfig.json
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

This skips type-checking inside node_modules, which hides the conflict. Not ideal long-term but gets you moving.

Why this happens

wagmi depends on @tanstack/react-query which depends on @types/react. If your app pins a different @types/react version, TypeScript sees two distinct React type definitions and treats them as incompatible — even if they're structurally identical.