Reown Wallet Connect AppKit SSR undefined error in React.js Application

[hugoorlov]

Hello Reown (formerly Wallet Connect) great Developers

I am Hugo, previously I had create wallet connect integration using AppKit web3modal and it's working fine, but suddenly when I change from web3modal into Reown packages new implementation I keep getting SSR error undefined in the browser console

I have done installing all required dependencies as mentioned in official documentation

npm install @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

I also implement the wagmi createAppKit function like so:

import { createAppKit } from '@reown/appkit/react'

import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

const queryClient = new QueryClient()

const projectId = 'YOUR_PROJECT_ID'

const metadata = {
name: 'AppKit',
description: 'AppKit Example',
url: 'https://web3modal.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/179229932']
}

export const networks = [mainnet, arbitrum]

const wagmiConfig = new WagmiAdapter({
ssr: true,
networks,
projectId
})

createAppKit({
adapters: [wagmiConfig],
networks: [mainnet, arbitrum],
metadata,
projectId,
features: {
analytics: true // Optional - defaults to your Cloud configuration
}
})

export function AppKitProvider({ children }) {
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
}

and I implement the AppKitProvider tag in this main.jsx file:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {AppKitProvider} from "./AppKitProvider.jsx";

createRoot(document.getElementById('root')).render(
<StrictMode>
<AppKitProvider>
<App />
</AppKitProvider>
</StrictMode>,
)

when running npm run dev

I always getting this error in the browser console:

This is the text version of the browser console error:

wagmi.js?v=5bb89cd4:227 Uncaught TypeError: Cannot read properties of undefined (reading 'ssr')
at Hydrate (wagmi.js?v=5bb89cd4:227:25)
at renderWithHooks (react-dom_client.js?v=5bb89cd4:11548:26)
at mountIndeterminateComponent (react-dom_client.js?v=5bb89cd4:14926:21)
at beginWork (react-dom_client.js?v=5bb89cd4:15914:22)
at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=5bb89cd4:3674:22)
at Object.invokeGuardedCallbackDev (react-dom_client.js?v=5bb89cd4:3699:24)
at invokeGuardedCallback (react-dom_client.js?v=5bb89cd4:3733:39)
at beginWork$1 (react-dom_client.js?v=5bb89cd4:19765:15)
at performUnitOfWork (react-dom_client.js?v=5bb89cd4:19198:20)
at workLoopSync (react-dom_client.js?v=5bb89cd4:19137:13)
react-dom_client.js?v=5bb89cd4:14032 The above error occurred in the <Hydrate> component:
at Hydrate (http://localhost:5173/node_modules/.vite/deps/wagmi.js?v=5bb89cd4:222:11)
at WagmiProvider (http://localhost:5173/node_modules/.vite/deps/wagmi.js?v=5bb89cd4:246:11)
at AppKitProvider (http://localhost:5173/src/AppKitProvider.jsx:47:34)
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.

This is my dependencies inside package.json file:

"dependencies": { "@reown/appkit-adapter-wagmi": "^1.0.1", "@tanstack/react-query": "^5.56.2", "react": "^18.3.1", "react-dom": "^18.3.1", "viem": "^2.21.9", "wagmi": "^2.12.12" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "vite": "^5.4.1" }

Anyone know why this happening? please kindly advise, because currently I am using wallet connect AppKit for on of my real project.

[tomiir]

Hey @hugoorlov !
Seems like you are initializing appkit correctly, but you are passing wagmiAdapter instead of wagmiAdapter.wagmiConfig to your WagmiProvider

This should fix your issue:

const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  networks,
  projectId
})
...
export function AppKitProvider({ children }) {
return (
 <WagmiProvider config={wagmiAdapter.wagmiConfig}>
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
}

Will push a fix to our docs so it's properly documented. Thank you for raising this 🙏

Let us know how it goes!

[hugoorlov]

Nice catch Sir! Thank you so much! you are really a life saver

That means the documentation must be updated, because there's no property ".wagmiConfig" mentioned inside the Appkit documentation for React

[rtomas]

fixed. thanks