Godspeed Comments - Answer Overflow

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)

8 replies

TTCTheo's Typesafe Cult

•Created by Godspeed on 5/9/2023 in #questions

T3 hydration mismatch - div in div

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

8 replies

TTCTheo's Typesafe Cult

•Created by Godspeed on 5/9/2023 in #questions

T3 hydration mismatch - div in div

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;

8 replies

TTCTheo's Typesafe Cult

•Created by Godspeed on 5/5/2023 in #questions

Using T3 for AI agents and similar products

Alright, thanks! That makes sense. I think I'm a bit "scared" of the React part, compared to Sveltes simplicity, but I feel like the whole Next space is moving fast and adding features all the time - so I will give it a try 🙏

3 replies

Gaming

Programming