"async/await is not yet supported in Client Components, only Server Components." But I'm not doing that. So, why am I getting this?

[dspedroborges]

Summary

I have two pages. Both of them are Server Components. When I load them individually, they work just fine, but when I click on an link to go to one another (or use the navigation arrows of the browser), I get the following error:

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.

I'm not using "use client" in server components, nor I'm using client component stuff in server components (I think).

Here's the code of the first page:

import Link from "next/link";
import SubmitConfirmationButton from "@/app/components/SubmitConfirmationButton";
import { getSession } from "@/auth";
import { deleteCompanyReminder } from "@/app/actions/company/CompanyReminderActions";
import prisma from "../../../../../../lib/prisma";
import TopBar from "@/app/components/TopBar";

export default async function Page({ params }: { params: { page: number } }) {
    const page = params.page;
    const session = await getSession();
    const company = await prisma.company.findUnique({
        where: {
            userId: session.user.id
        }
    });

    const today = new Date();
    const startOfTodayUTC = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
    const endOfTodayUTC = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999));

    const reminders = await prisma.companyReminder.findMany({
        where: {
            companyId: company?.id,
            done: false,
            date: {
                gte: startOfTodayUTC,
                lte: endOfTodayUTC
            }
        },
        take: 10,
        skip: (page && page > 1) ? page * 10 : 0
    });

    return (
        <>
            <TopBar title="Lembretes pendentes" />
            {
                reminders.map((elem, i) => {
                    return (
                        <div key={i}>
                            <div className="flex justify-around items-center border-t border-x">
                                <span className="w-full text-center font-bold">Descrição</span>
                                <span className="w-full text-center font-bold">Data</span>
                                <span className="w-full text-center font-bold">Editar</span>
                                <span className="w-full text-center font-bold">Deletar</span>
                            </div>
                            <div className="flex justify-around items-center border">
                                <span className="border-r w-full text-center py-4 px-2">{elem.description}</span>
                                <span className="border-r w-full text-center py-4 px-2">{new Date(elem.date).toLocaleDateString()}</span>
                                <Link className="w-full py-4 px-2 text-center hover:underline" href={`/empresa/lembretes/editar/${elem.id}`}>Editar</Link>
                                <form action={deleteCompanyReminder.bind(null, elem?.id)} className="w-full py-4 px-2">
                                    <SubmitConfirmationButton name="Deletar" loadingName="Deletando..." />
                                </form>
                            </div>
                        </div>
                    )
                })
            }
            {
                reminders.length > 0 ? (
                    <div className="bg-gray-900 text-white py-4 px-2 flex items-center justify-around">
                        <Link href={`/empresa/clientes/todos/${page - 1}`}>Anterior</Link>
                        <span>{(page && page > 1) ? page : 1}</span>
                        <Link href={`/empresa/clientes/todos/${page + 1}`}>Anterior</Link>
                    </div>
                ) : (
                    <div className="text-center my-8 font-bold">Nenhum lembrete encontrado.</div>
                )
            }
        </>
    )
}

And here's the code of the second page:

import Link from "next/link";
import { deleteCompanyClient } from "@/app/actions/company/CompanyClientActions";
import SubmitConfirmationButton from "@/app/components/SubmitConfirmationButton";
import { getSession } from "@/auth";
import prisma from "../../../../../../lib/prisma";
import { deleteCompanyReminder } from "@/app/actions/company/CompanyReminderActions";
import TopBar from "@/app/components/TopBar";
import Searcher from "@/app/components/Searcher";

export default async function Page({ params }: { params: { page: number } }) {
    const page = params.page;
    const session = await getSession();
    const company = await prisma.company.findUnique({
        where: {
            userId: session.user.id
        }
    });
    const reminders = await prisma.companyReminder.findMany({
        where: {
            companyId: company?.id,
            done: true,
        },
        take: 10,
        skip: (page && page > 1) ? page * 10 : 0
    });

    return (
        <>
            <TopBar title="Lembretes realizados" />
            <Searcher url="/empresa/lembretes/busca" />
            {
                reminders.map((elem, i) => {
                    return (
                        <div key={i}>
                            <div className="flex justify-around items-center border-t border-x">
                                <span className="w-full text-center font-bold">Descrição</span>
                                <span className="w-full text-center font-bold">Data</span>
                                <span className="w-full text-center font-bold">Editar</span>
                                <span className="w-full text-center font-bold">Deletar</span>
                            </div>
                            <div className="flex justify-around items-center border">
                                <span className="border-r w-full text-center py-4 px-2">{elem.description}</span>
                                <span className="border-r w-full text-center py-4 px-2">{new Date(elem.date).toLocaleDateString()}</span>
                                <Link className="w-full py-4 px-2 text-center hover:underline" href={`/empresa/lembretes/editar/${elem.id}`}>Editar</Link>
                                <form action={deleteCompanyReminder.bind(null, elem?.id)} className="w-full py-4 px-2">
                                    <SubmitConfirmationButton name="Deletar" loadingName="Deletando..." />
                                </form>
                            </div>
                        </div>
                    )
                })
            }
            {
                reminders.length > 0 ? (
                    <div className="bg-gray-900 text-white py-4 px-2 flex items-center justify-around">
                        <Link href={`/empresa/clientes/todos/${page - 1}`}>Anterior</Link>
                        <span>{(page && page > 1) ? page : 1}</span>
                        <Link href={`/empresa/clientes/todos/${page + 1}`}>Anterior</Link>
                    </div>
                ) : (
                    <div className="text-center my-8 font-bold">Nenhum lembrete encontrado.</div>
                )
            }
        </>
    )
}

Example

No response

Steps to Reproduce

Just try to go back or go forward, using interval links of even the navigation arrows of the browser.

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community