Failed Hydration

[emperial]

Hi folks

I’m working on a NextJS project and on one of the pages I got 2 errors on browser.

My Code:

import prisma from "@/prisma/client";
import { Button, Flex, Table } from "@radix-ui/themes";
import { getServerSession } from "next-auth";
import { isAdmin } from "../auth/adminValidation";
import authOptions from "../auth/authOptions";
import { RequestStatusBadge, UserStatusBadge } from "@/app/components";

const RequestsPage = async () => {
  const session = await getServerSession(authOptions);
  const userIsAdmin = await isAdmin(session);

  const requests = await prisma.borrowHistory.findMany();

  const barcodeHandler = async (bookCopyId: number) => {
    const bookCopy = await prisma.bookCopy.findUnique({
      where: { id: bookCopyId },
    });
    if (bookCopy) return bookCopy.barcode;
  };

  const coverImageHandler = async (bookCopyId: number) => {
    const bookCopy = await prisma.bookCopy.findFirst({
      where: { id: bookCopyId },
    });
    const book = await prisma.book.findUnique({
      where: { id: bookCopy!.bookId },
    });
    if (book) return book.image;
  };

  const titleHandler = async (bookCopyId: number) => {
    const bookCopy = await prisma.bookCopy.findFirst({
      where: { id: bookCopyId },
    });
    const book = await prisma.book.findUnique({
      where: { id: bookCopy?.bookId },
    });
    if (book) return book.title;
  };

  const requestorHandler = async (userId: number) => {
    const user = await prisma.user.findUnique({
      where: { id: userId },
    });
    if (user) return user.name;
  };

  return (
    <>
      {userIsAdmin && (
        <Table.Root variant="surface">
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeaderCell className="hidden md:table-cell">
                Cover
              </Table.ColumnHeaderCell>

              <Table.ColumnHeaderCell>Barcode</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Title</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Request Status</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Requestor</Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell className="hidden md:table-cell">
                Request Date
              </Table.ColumnHeaderCell>
              <Table.ColumnHeaderCell>Action</Table.ColumnHeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>
            {requests?.map(async (request) => (
              <Table.Row key={request.id} align="center">
                <Table.RowHeaderCell className="hidden md:table-cell">
                  <picture>
                    <img
                      height="100"
                      width="70"
                      src={(await coverImageHandler(request.bookCopyId)) ?? ""}
                      alt=""
                    />
                  </picture>
                </Table.RowHeaderCell>
                <Table.Cell>
                  {await barcodeHandler(request.bookCopyId)}
                </Table.Cell>
                <Table.Cell>
                  {await titleHandler(request.bookCopyId)}
                </Table.Cell>
                <Table.Cell>
                  <RequestStatusBadge status={request.requestStatus} />
                </Table.Cell>
                <Table.Cell>
                  {await requestorHandler(request.userId)}
                </Table.Cell>
                <Table.Cell className="hidden md:table-cell">
                  {request.createdAt.toDateString()}
                </Table.Cell>
                <Table.Cell>
                  <Flex gap="2">
                    <Button size="1" color="green">
                      Approve
                    </Button>
                    <Button size="1" color="red">
                      Reject
                    </Button>
                  </Flex>
                </Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table.Root>
      )}
    </>
  );
};

export const dynamic = "force-dynamic";

export default RequestsPage;

The Errors I get are shown in below screenshots:

Thank you in advance for your help.

[emperial]

Below is the second error:

[lucidlear]

Hi the hydration issue basically means the markup on the front-end is not the same as what is rendered on the server. For me I had chrome extensions that were injecting markup into the webpage and changing the DOM structure. Try rendering the page in incognito mode and see if it solves the problem, if so its probably the fault of some 3rd party extension. This video helped me a lot to debug the issue

[emperial]

The video was very helpful. Thanks @lucidlear