Unhandled Runtime Error Error: Text content does not match server-rendered HTML. #865

BenBktech · 2022-11-10T17:28:32Z

BenBktech
Nov 10, 2022

Hello,

My test script is pretty simple. It's a NextJS App. But I always have this error : Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

This error appears when I use RainbowKit only, it never appears otherwise.

Here are my files in pages :

_app.js :

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultWallets,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.hardhat],
  [
    alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_ID }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'My RainbowKit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  )
}

index.tsx

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount, useProvider, useSigner, useContract  } from 'wagmi'
import Content from '../components/content';

export default function Home() {

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ConnectButton />
      <Content />
    </div>
  )
}

content.tsx :

import { useAccount, useProvider, useSigner, useContract  } from 'wagmi'

export default function Content() {
    const { address, isConnected } = useAccount()
    const provider = useProvider()
    const { data: signer } = useSigner()

    return (
        <div>
            {isConnected ? (
                <p>Ok</p>
            ) : (
                <p>Pas Ok</p>
            )}
        </div>
    )
}

What did I do wrong ?

Thank you for your help,
Ben

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unhandled Runtime Error Error: Text content does not match server-rendered HTML. #865

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Unhandled Runtime Error Error: Text content does not match server-rendered HTML. #865

BenBktech Nov 10, 2022

Replies: 0 comments

BenBktech
Nov 10, 2022