Theo's Typesafe Cult•2y ago

T3 hydration mismatch - div in div

After following the T3 0 to prod, I tried setting up a new similar project. It is pretty much identical, although I stripped it of the posts and profile endpoints and pages. But I'm currently getting this, and cant figure out what is going wrong with hydration (ref image). How do I figure out what is causing this issue?

3 Replies

GodspeedOP•2y ago

For info, my _app.tsx file looks like:

import type { AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "react-hot-toast";
import Head from "next/head";

const MyApp: AppType = ({ Component, pageProps }) => {
    return (
        <ClerkProvider {...pageProps}>
            <Head>
                <title>App Title</title>
                <meta name="description" content="content" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <Toaster position="top-right" />
            <Component {...pageProps} />
        </ClerkProvider>
    );
};

export default api.withTRPC(MyApp);

import type { AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "react-hot-toast";
import Head from "next/head";

const MyApp: AppType = ({ Component, pageProps }) => {
    return (
        <ClerkProvider {...pageProps}>
            <Head>
                <title>App Title</title>
                <meta name="description" content="content" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <Toaster position="top-right" />
            <Component {...pageProps} />
        </ClerkProvider>
    );
};

export default api.withTRPC(MyApp);

and my only page index.tsx looks like:

import type { NextPage } from "next";
import { PageLayout } from "~/components/layout";
import { useUser, SignInButton, UserButton } from "@clerk/nextjs";

const Home: NextPage = () => {
    const { isLoaded: userLoaded, isSignedIn } = useUser();
    if (!userLoaded) return <div />;

    return (
    <>
      <PageLayout>
        <div className="border-b border-slate-400 p-4">
          {!isSignedIn && <div className="flex justify-center"><SignInButton /></div>}
          {!!isSignedIn && <div className="flex justify-center"><UserButton /></div>}
        </div>
      </PageLayout>
    </>
    );
};

export default Home;

import type { NextPage } from "next";
import { PageLayout } from "~/components/layout";
import { useUser, SignInButton, UserButton } from "@clerk/nextjs";

const Home: NextPage = () => {
    const { isLoaded: userLoaded, isSignedIn } = useUser();
    if (!userLoaded) return <div />;

    return (
    <>
      <PageLayout>
        <div className="border-b border-slate-400 p-4">
          {!isSignedIn && <div className="flex justify-center"><SignInButton /></div>}
          {!!isSignedIn && <div className="flex justify-center"><UserButton /></div>}
        </div>
      </PageLayout>
    </>
    );
};

export default Home;

The PageLayout looks like:

import type { PropsWithChildren } from "react";

export const PageLayout = (props: PropsWithChildren) => {
    return (
        <main className="">
            <div className="">
                {props.children}
            </div>
        </main>
    );
};

import type { PropsWithChildren } from "react";

export const PageLayout = (props: PropsWithChildren) => {
    return (
        <main className="">
            <div className="">
                {props.children}
            </div>
        </main>
    );
};

I suppose I must be looking in the wrong place, if there isnt an error here the error says Warning: Did not expect server HTML to contain a <div> in <div>., but I am not familiar enough with this to know if it refers to SSG, SSR, or HTML returned from server endpoints (if that is even possible in this framework)

GodspeedOP•2y ago

not quite sure where in this the error would be - would appreciate any guidance

GodspeedOP•2y ago

so uhhh why does npm cache clear --force solve this? how does this error occur?

Gaming

Programming

T3 hydration mismatch - div in div