NextJS Error: Hydration failed because the initial UI does not match what was rendered on the server

Question

I am getting the following errors in my nextjs application:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

In the console:

Warning: Expected server HTML to contain a matching <div> in <div>.
    at div
    at SendTransaction
    at div
    at MyApp (webpack-internal:///./pages/_app.tsx:39:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)

I am doing the tutorial on wagmi found here: https://wagmi.sh/examples/send-transaction

My file structure is as such: comps/transaction.tsx (This is scaled back to as simple as I could make it and it still throws these errors).

import * as React from 'react';

 
export function SendTransaction() {

   return <h1>TEST!</h1>
      
}

pages/index.tsx

import type { NextPage } from 'next';
import { ConnectKitButton } from 'connectkit';

const Home: NextPage = () => {
  return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh',
        }}
      >
      <ConnectKitButton />
    </div>
    
  );
};

export default Home;

pages/_app.tsx

import { WagmiConfig, createClient, useAccount, useConnect, useDisconnect } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { ConnectKitProvider, getDefaultClient } from 'connectkit';
import { SendTransaction } from '../comps/transaction';
import React from 'react';


const client = createClient(
  getDefaultClient({
    appName: 'ConnectKit Next.js demo',
    //infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
    //alchemyId:  process.env.NEXT_PUBLIC_ALCHEMY_ID,
    chains: [mainnet, polygon, optimism, arbitrum],
  })
);


function MyApp({ Component, pageProps }: AppProps) {
  const { isConnected } = useAccount();
  if (isConnected) {
    return (
        <div>
             {/* Account content goes here */}
             <SendTransaction />
        </div>
    )
  }
  
  return (
        <WagmiConfig client={client}>
            <ConnectKitProvider>
                <Component {...pageProps} />
            </ConnectKitProvider>
        </WagmiConfig>
    
  );
}

export default MyApp;

In the above, pages/_app.tsx, if i remove:

const { isConnected } = useAccount();
  if (isConnected) {
    return (
        <div>
             {/* Account content goes here */}
             <SendTransaction />
        </div>
    )
  }

It works just fine. I am new to react and nextjs, and I have been pulling my hair out over this problem for a while now.

I have looked here https://nextjs.org/docs/messages/react-hydration-error (As well as other stackoverflow articles and other documentation) And I cannot figure out why this hydration error is occurring, especially since my component is so simple. The warning: Warning: Expected server HTML to contain a matching in . Makes no sense as all of my tags seem to be matching up. I am thinking I need to use useEffect for something but cannot figure out what. Any help is appreciated.

Answer 1

function MyApp({ Component, pageProps }: AppProps) {
  const { isConnected } = useAccount();
  const loading = (
        <div>
           <SendTransaction />
        </div>
  );
  
  return (
        <WagmiConfig client={client}>
            <ConnectKitProvider>
               {isConnected ?(loading) : (<Component {...pageProps} />)} 
            </ConnectKitProvider>
        </WagmiConfig>   
  );
}