# Failed Hydration

**URL:** <https://forum.codewithmosh.com/t/failed-hydration/25326>\
**Category:** Next.js\
**Created:** [February 27, 2024, 9:37am UTC](https://forum.codewithmosh.com/t/failed-hydration/25326 "2024-02-27T09:37:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![emperial](https://avatars.discourse-cdn.com/v4/letter/e/58956e/32.png) [@emperial](https://forum.codewithmosh.com/u/emperial)\
**Post date:** [February 27, 2024, 9:37am UTC](https://forum.codewithmosh.com/t/failed-hydration/25326/1 "2024-02-27T09:37:55Z")

</div>

Hi folks

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

**My Code:**

```auto
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:

 ![Screenshot 2024-02-27 at 10.33.58](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/1/16295b2d6674634b0181de632ccd5871d4b21fd4.png)

Thank you in advance for your help. 🙂

---

<div class="post-metadata">

**Author:** ![emperial](https://avatars.discourse-cdn.com/v4/letter/e/58956e/32.png) [@emperial](https://forum.codewithmosh.com/u/emperial)\
**Post date:** [February 27, 2024, 9:39am UTC](https://forum.codewithmosh.com/t/failed-hydration/25326/2 "2024-02-27T09:39:32Z")

</div>

Below is the second error:

 ![Screenshot 2024-02-27 at 10.34.38](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/3/35bcf9f04c65faf12dc27a44d48c8ec1cc3d9085.jpeg)

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [February 28, 2024, 12:37am UTC](https://forum.codewithmosh.com/t/failed-hydration/25326/3 "2024-02-28T00:37:14Z")

</div>

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](https://www.youtube.com/watch?v=KAjemAivU24) video helped me a lot to debug the issue

---

<div class="post-metadata">

**Author:** ![emperial](https://avatars.discourse-cdn.com/v4/letter/e/58956e/32.png) [@emperial](https://forum.codewithmosh.com/u/emperial)\
**Post date:** [February 28, 2024, 12:49pm UTC](https://forum.codewithmosh.com/t/failed-hydration/25326/4 "2024-02-28T12:49:42Z")

</div>

The video was very helpful. Thanks @lucidlear